Import Web Component from /node_modules

[gdbaldw]

Documentation shows:

import 'magic-reveal/magic-reveal.js';

<magic-reveal>

This text will get magically revealed. I can **still** use markdown as long as between the opening/closing tag there is an empty line.

</magic-reveal>

Added...
> yarn workspace @d4kmor/launch add @inventage/leaflet-map

Then in-lined...

import '@inventage/leaflet-map';

That works!

But then in-lined...

<h1>Hello World</h1>

SyntaxError: Support for the experimental syntax 'jsx' isn't currently enabled

Sorry, I'm ahead of development. Will be nice.

[bennypowers]

👋 Here's some code for auto-importing elements to pages:

https://github.com/apollo-elements/apollo-elements/blob/a0fc87821eed43541484803032c060fa8c67bb89/rocket-plugins/imports.mjs

and the config:

https://github.com/apollo-elements/apollo-elements/blob/a0fc87821eed43541484803032c060fa8c67bb89/rocket.config.mjs#L112-L119

We're hoping to publish this at some point, but in the mean time I hope copy/paste will help you.

I'm not sure why you're getting that JSX error, but maybe with this auto-import, it will go away

[gdbaldw]

All done! @bennypowers I believe it closely matches your configuration spec, does not break the current configuration spec, and implements your method. Any comments/corrections before I submit the pull request? See...
forked branch

[bennypowers]

🤯 wow I had only gotten as far as forking upstream :D

LGTM at a glance. There's a small typo in the readme for the 'specifiers' config (wrap prop in quotes)

and would you please add yourself and myself to the 'contributors' field in package.json?

yeah fire away lets see what upstream thinks

[gdbaldw]

Returning to the issue at hand, I learned the solution. Will draft a "rocket theme" demonstrating use of our newly revised "eleventy-plugin-add-web-component-definitions" and the @inventage/leaflet-map web component.

[gdbaldw]

A simple npm install and rocket config now works! ...with limitations.

npm init -y

npm i @d4kmor/cli @d4kmor/launch eleventy-plugin-add-web-component-definitions @inventage/leaflet-map

rocket.config.mjs:

import { rocketLaunch } from '@d4kmor/launch';
import addWebComponentDefinitions from 'eleventy-plugin-add-web-component-definitions';

export default {
  themes: [rocketLaunch()],
  eleventy: eleventyConfig => {
    eleventyConfig.addPlugin(
      addWebComponentDefinitions,
      {
        specifiers: {
	  "leaflet-map": "@inventage/leaflet-map"
	},
        singleScript: true
      }
    );
  }
};

docs/index.md:

# My First Page

<leaflet-map></leaflet-map>

The custom tag is markdown-parsed into a paragraph tag enclosure: <p><leaflet-map></leaflet-map></p>

The script import is correct, <script type="module">import "./../node_modules/@inventage/leaflet-map/dist/leaflet-map.js";</script><!-- injected by web-dev-server -->

This meets my current needs.

A more robust solution would ingest the custom-tag from a js script inside a markdown file; but, currently fails with SyntaxError. Also, rocket could know in advance the custom-tags registered with each module, and internally implement the eleventy-plugin-add-web-component-definitions. Would be so cool to simply list the module names in the configuration file, and then use their custom-tags, no per tag configuration required.

[bennypowers]

nice work @gdbaldw on that PR

I've also got that working on my site, but it does require singleScript: true, which bundles all the imports into an inline module as you demonstrated. I couldn't get rocket to find the files when I used the default singleScript: false, which instead adds one <script type="module" src="..."> for each component.

[gdbaldw]

@bennypowers Thanks. I expect there no practical benefit to using the src attribute in development. And with rocket, I believe rollup bundles and outputs scripts as a src attribute during production build.