Create non-auto-registering routes

custom-elements-manifest.config.js

@@ -3,6 +3,7 @@ import { parse } from 'comment-parser';
 import { pascalCase } from 'pascal-case';
 import commandLineArgs from 'command-line-args';
 import fs from 'fs';
+import * as path from 'path'
 
 const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
 const { name, description, version, author, homepage, license } = packageData;
@@ -26,7 +27,7 @@ function replace(string, terms) {
 }
 
 export default {
-  globs: ['src/components/**/*.ts'],
+  globs: ['src/components/**/*.component.ts'],
   exclude: ['**/*.styles.ts', '**/*.test.ts'],
   plugins: [
     // Append package data
@@ -36,7 +37,33 @@ export default {
         customElementsManifest.package = { name, description, version, author, homepage, license };
       }
     },
+    // Infer tag names because we no longer use @customElement decorators.
+    {
+      name: "shoelace-infer-tag-names",
+      analyzePhase({ ts, node, moduleDoc }) {
+        switch (node.kind) {
+          case ts.SyntaxKind.ClassDeclaration: {
+            const className = node.name.getText();
+            const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
+
+            const importPath = moduleDoc.path
+
+            // This is kind of a best guess at components. "thing.component.ts"
+            if (!importPath.endsWith(".component.ts")) {
+              return
+            }
 
+            const tagName = "sl-" + path.basename(importPath, ".component.ts")
+
+
+            classDoc.tagName = tagName
+
+            // This used to be set to true by @customElement
+            classDoc.customElement = true
+          }
+        }
+      }
+    },
     // Parse custom jsDoc tags
     {
       name: 'shoelace-custom-tags',
@@ -58,6 +85,9 @@ export default {
               });
             });
 
+            // This is what allows us to map JSDOC comments to ReactWrappers.
+            classDoc["jsDoc"] = node.jsDoc.map((jsDoc) => jsDoc.getFullText()).join("\n")
+
             const parsed = parse(`${customComments}\n */`);
             parsed[0].tags?.forEach(t => {
               switch (t.tag) {

docs/pages/resources/changelog.md

@@ -14,6 +14,11 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 ## Next
 
+- Added JSDOC comments to React Wrappers for better documentation when hovering a component. []
+- Added `displayName` to React Wrappers for better debugging. []
+- Split auto-defining routes and non-auto-defining routes for Components. []
+- Fixed React Treeshaking by introducing `sideEffects` key in `package.json`. []
+- Fixed a bug in `<sl-tree>` where it was auto-defining `<sl-tree-item>`. []
 - Added tests for `<sl-qr-code>` [#1416]
 - Added support for pressing [[Space]] to select/toggle selected `<sl-menu-item>` elements [#1429]
 - Fixed a bug in focus trapping of modal elements like `<sl-dialog>`. We now manually handle focus ordering as well as added `offsetParent()` check for tabbable boundaries in Safari. Test cases added for `<sl-dialog>` inside a shadowRoot [#1403]
@@ -1591,4 +1596,4 @@ The following pages demonstrate why this change was necessary.
 
 ## 2.0.0-beta.1
 
-- Initial release
+- Initial release

docs/pages/resources/contributing.md

@@ -367,7 +367,6 @@ Then use the following syntax for comments so they appear in the generated docs.
  * @cssproperty --color: The component's text color.
  * @cssproperty --background-color: The component's background color.
  */
-@customElement('sl-example')
 export default class SlExample {
   // ...
 }
@@ -467,4 +466,4 @@ Guidelines for writing tests:
 - Tests should not produce log lines. Note that sometimes this cannot be prevented as the test runner might log errors (e.g. 404s).
 - Try keeping the main test readable: Extract more complicated sets of selectors/commands/assertions into separate functions.
 - Try to aim testing the user facing features of the component instead of the internal workings of the component.
-- Group multiple tests for one feature into describe blocks.
+- Group multiple tests for one feature into describe blocks.

package.json

@@ -9,6 +9,15 @@
   "web-types": "dist/web-types.json",
   "type": "module",
   "types": "dist/shoelace.d.ts",
+  "sideEffects": [
+    "./dist/shoelace.js",
+    "./dist/shoelace-autoloader.js",
+    "./dist/components/**/*.js",
+    "./dist/translations/**/*.*",
+    "./src/translations/**/*.*",
+    "// COMMENT: This monstrosity below isn't perfect, but its like 99% to get bundlers to recognize 'thing.component.ts' as having no side effects. Example: https://regexr.com/7grof",
+    "./dist/components/**/*((?<!(\\.component|\\.styles)))\\.js"
+  ],
   "exports": {
     ".": {
       "types": "./dist/shoelace.d.ts",
@@ -20,6 +29,7 @@
     "./dist/utilities/*": "./dist/utilities/*",
     "./dist/react": "./dist/react/index.js",
     "./dist/react/*": "./dist/react/*",
+    "./dist/shoelace.js": "./dist/shoelace.js",
     "./dist/translations/*": "./dist/translations/*"
   },
   "files": [

scripts/build.js

@@ -11,6 +11,7 @@ import getPort, { portNumbers } from 'get-port';
 import ora from 'ora';
 import util from 'util';
 import * as path from 'path';
+import { readFileSync } from 'fs';
 
 const { serve } = commandLineArgs([{ name: 'serve', type: Boolean }]);
 const outdir = 'dist';
@@ -22,6 +23,7 @@ let childProcess;
 let buildResults;
 
 const bundleDirectories = [cdndir, outdir];
+const shoelaceVersion = JSON.stringify(JSON.parse(readFileSync(path.join(process.cwd(), "package.json")).toString()).version.toString())
 
 //
 // Runs 11ty and builds the docs. The returned promise resolves after the initial publish has completed. The child
@@ -97,7 +99,8 @@ async function buildTheSource() {
     chunkNames: 'chunks/[name].[hash]',
     define: {
       // Floating UI requires this to be set
-      'process.env.NODE_ENV': '"production"'
+      'process.env.NODE_ENV': '"production"',
+      'shoelaceVersion': shoelaceVersion,
     },
     bundle: true,
     //
@@ -108,7 +111,7 @@ async function buildTheSource() {
     //
     external: alwaysExternal,
     splitting: true,
-    plugins: []
+    plugins: [],
   };
 
   const npmConfig = {

scripts/make-react.js

@@ -36,6 +36,8 @@ components.map(component => {
 
   fs.mkdirSync(componentDir, { recursive: true });
 
+  const jsDoc = component.jsDoc
+
   const source = prettier.format(
     `
       import * as React from 'react';
@@ -45,14 +47,32 @@ components.map(component => {
       ${eventNameImport}
       ${eventImports}
 
-      export default createComponent({
-        tagName: '${component.tagName}',
+      const tagName = '${component.tagName}'
+
+      const component = createComponent({
+        tagName,
         elementClass: Component,
         react: React,
         events: {
           ${events}
+        },
+        displayName: "${component.name}"
+      })
+
+      ${jsDoc}
+      class SlComponent extends React.Component<Parameters<typeof component>[0]> {
+        constructor (...args: Parameters<typeof component>) {
+          super(...args)
+          Component.define(tagName)
         }
-      });
+
+        render () {
+          const { children, ...props } = this.props
+          return React.createElement(component, props, children)
+        }
+      }
+
+      export default SlComponent;
     `,
     Object.assign(prettierConfig, {
       parser: 'babel-ts'

scripts/shared.js

@@ -4,13 +4,11 @@ export function getAllComponents(metadata) {
 
   metadata.modules.map(module => {
     module.declarations?.map(declaration => {
-      if (declaration.customElement) {
-        const component = declaration;
-        const path = module.path;
+      const component = declaration;
+      const path = module.path;
 
-        if (component) {
-          allComponents.push(Object.assign(component, { path }));
-        }
+      if (component) {
+        allComponents.push(Object.assign(component, { path }));
       }
     });
   });