Technical Discovery

[aloverso]

• Export nj-banner in Stencil to React app
• Build nj-banner in Lit.js to compare to Stencil
• Prove that nj-banner can export/import vanilla JS and React in Lit
• Build alert, button, input in chosen framework

[Sarah-Shively]

Update - started 6/11, likely to lean towards Stencil

[SirSamuelJoseph]

Progress update:

Was able to recreate nj-banner in Lit.js, very similar construction as to Stencil, no preferences there. I've also been able to export that as an JS web component.

I've built a stateful component on the litJs playground and that was pretty easy, but haven't been able to do the same for Stencil because of export issues I'll describe below (or rather, I was able to build the React component but can't verify it without exporting).

Have been having trouble getting both projects to properly export as React components. Spencer helped me figure out an export issue yesterday with Stencil but it is now looking like I'll have to restructure that repo to match the expected structure that's apparently extremely recommended for React exporting.

I've been getting pulled away for more time-sensitive work but I'll be working on this primarily the rest of the week. If I can get Stencil to export to React well then I can hopefully build the other components fairly quickly

[SirSamuelJoseph]

Progress update:

Still having a really difficult time getting the export to work right. I'm pushing my changes to the njwds-stencil-components repo on a branch named nx-stencil-react if someone else wants to look at it while I'm on vacation (until July 9) but if not, when I get back I am going to need to pair with someone on this because I am just stuck. Also didn't spend as much time on this as I was hoping for due to emergency issues popping up on business.nj.gov

[aloverso]

Anne's convo with Lizzy:

NPM setup:

• Duplicate the /.github/workflow files from njwds-stencil-components
• Configure repository secrets GH_TOKEN, NPM_TOKEN

Stencil technical output:

• Confirm that stencil outputs to both: a React library (that would be installed via npm) and a static JS export that can be used via a <script> tag in any HTML
• Publish to NPM and confirm that importing the library via script-tag works
• Publish to NPM and confirm that importing the React library via npm install works

Basic components to build:

• Banner
• Alert
• Button
• Text input