Project: Port My Pop-Out Component
Sun Aug 20 22:31:14 PDT 2023
I wanted to use this utility in JSX for another project. I was working on this NakedJSX website so I thought I'd try it there. I wrote this new project in MDX, so the pop-out utility would have to work there. Originally I wrote the utility in vanilla JS in raw HTML, so there was friction in porting it to JSX.
Before attempting it in NakedJSX, I tried it in my previous website driven by React. It was not easy to write Vanilla JS with React's JSX compiler. For example, to make a
dangerouslySetInnerHTML attribute and put the code in a string. Of course, in retrospect that made sense because React's front-end scripting methodology is so specific, the term "vanilla JS" was coined just to distinguish from it.
So to start my experiment, I did the first thing I had tried in my React website. I tried to copy the basic HTML tags from my old Vanilla page directly into this MDX document.
<details cpnt-popout open> <summary>Popout</summary> <div cpnt-popout__target></div> </details>
I got this error.
0.212: ERROR: Error: Invalid attribute name: my_random_attribute at requireValidAttributeName (file:///home/human/projects/reeds-website/node_modules/nakedjsx/node_modules/@nakedjsx/core/runtime/page/document.mjs:313:15)
I learned that I couldn't have underscores
_ in my attribute names. In Vanilla HTML and JS, I wrote attributes with similar structures to BEM CSS which uses a lot of underscores. It was easy to replace underscores with dashes
-. I found a definitive resource which explained that underscores are valid in HTML attribute names. StackOverflow isn't usually definitive, so I was grateful that answer referred to the spec.
I understand that arbitrary attributes turn HTML invalid, but it's fun to add a random attribute to target with a CSS selector like
[my-random-attribute]. I learned at some point that CSS attribute selectors are a performance trap, but optimization must balance against fun in personal projects.
Once I established that I could see the output of that basic HTML in the document, I tried adding a
script tag with the code to drive the interactivity of the widget. But it didn't work. I recorded my effort to make that work in another project.
Future: I continued from here
Future: Now that I had the basic
script tag working in MDX under NakedJSX, I went back to my original task to add a
script tag with my original "popout" code and see it working on the page.
Future: Next, I tried to add an inline
Future: I also wanted to see if this would work as a reusable component, imported into my MDX page from an external JSX file.