use plop for npm run create

.prettierignore

@@ -1,3 +1,4 @@
+*.hbs
 *.md
 .cache
 .github

docs/_sidebar.md

@@ -48,6 +48,7 @@
   - [Tag](/components/tag)
   - [Textarea](/components/textarea)
   - [Tooltip](/components/tooltip)
+  <!--plop:component-->
 
 - Utilities
   - [Animation](/components/animation)

package.json

@@ -33,7 +33,7 @@
     "build": "node scripts/build.js",
     "prepublishOnly": "npm run build && npm run test",
     "prettier": "prettier --write --loglevel warn .",
-    "create": "node scripts/create-component.js",
+    "create": "plop --plopfile scripts/plop/plopfile.cjs",
     "test": "web-test-runner \"src/**/*.test.ts\" --node-resolve --puppeteer",
     "test:watch": "web-test-runner \"src/**/*.test.ts\" --node-resolve --puppeteer --watch"
   },
@@ -66,6 +66,7 @@
     "front-matter": "^4.0.2",
     "get-port": "^5.1.1",
     "husky": "^4.3.8",
+    "plop": "^2.7.4",
     "prettier": "^2.2.1",
     "recursive-copy": "^2.0.11",
     "sass": "^1.32.7",

scripts/create-component.js

@@ -1,153 +0,0 @@
-import chalk from 'chalk';
-import fs from 'fs';
-import mkdirp from 'mkdirp';
-import path from 'path';
-import process from 'process';
-
-const args = process.argv.slice(2);
-const tagName = (args[0] + '').toLowerCase().trim();
-const tagNameWithoutPrefix = tagName.replace(/^sl-/, '');
-const className = tagName.replace(/(^\w|-\w)/g, string => string.replace(/-/, '').toUpperCase());
-const readableName = tagNameWithoutPrefix
-  .replace(/-/g, ' ')
-  .replace(/\w\S*/g, string => string.charAt(0).toUpperCase() + string.substr(1).toLowerCase());
-
-const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
-const minorVersion = packageData.version.split('.').slice(0, 2).join('.');
-
-// Check for tag name
-if (!tagName) {
-  console.error('Please provide a tag name for the new component.\n');
-  process.exit();
-}
-
-// Verify tag name prefix
-if (!/^sl-/.test(tagName)) {
-  console.error('Tag names must start with the sl- prefix.\n');
-  process.exit();
-}
-
-// Generate a source file
-const componentFile = `src/components/${tagNameWithoutPrefix}/${tagNameWithoutPrefix}.ts`;
-if (fs.existsSync(componentFile)) {
-  console.error(`There is already a component using the <${tagName}> tag!\n`);
-  process.exit();
-}
-
-const componentSource = `
-import { LitElement, html, unsafeCSS } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import styles from 'sass:./${tagNameWithoutPrefix}.scss';
-
-/**
- * @since ${minorVersion}
- * @status experimental
- *
- * @dependency sl-tag-here
- * @dependency sl-tag-here
- *
- * @slot - The default slot.
- * @slot example - A named slot called example.
- *
- * @part base - The component's base wrapper.
- *
- * @customProperty example - An example custom property
- *
- * @animation example.show - An example animation.
- * @animation example.hide - An example animation.
- */
-@customElement('${tagName}')
-export default class ${className} extends LitElement {
-  static styles = unsafeCSS(styles);
-
-  render() {
-    return html\`
-      <div part="base">
-        <slot></slot>
-      </div>
-    \`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    '${tagName}': ${className};
-  }
-}
-`.trimLeft();
-
-// Generate a stylesheet
-const stylesFile = `src/components/${tagNameWithoutPrefix}/${tagNameWithoutPrefix}.scss`;
-const stylesSource = `
-@use '../../styles/component';
-
-:host {
-  display: block;
-}
-`.trimLeft();
-
-// Generate a docs page
-const docsFile = `docs/components/${tagNameWithoutPrefix}.md`;
-const docsSource = `
-# ${readableName}
-
-[component-header:${tagName}]
-
-Brief description of the component here, followed by an example.
-
-\`\`\`html preview
-<${tagName}>
-  Hello, world!
-</${tagName}>
-\`\`\`
-
-## Examples
-
-### Variation
-
-A description of the variation, followed by an example.
-
-\`\`\`html preview
-<${tagName}>
-  Here is a variation
-</${tagName}>
-\`\`\`
-
-[component-metadata:${tagName}]
-`.trimLeft();
-
-// Create the files
-mkdirp.sync(path.dirname(componentFile));
-mkdirp.sync(path.dirname(stylesFile));
-mkdirp.sync(path.dirname(docsFile));
-
-fs.writeFileSync(componentFile, componentSource, 'utf8');
-fs.writeFileSync(stylesFile, stylesSource, 'utf8');
-fs.writeFileSync(docsFile, docsSource, 'utf8');
-
-// Add it to shoelace.ts
-const allExports = fs.readFileSync('src/shoelace.ts', 'utf8');
-fs.writeFileSync(
-  'src/shoelace.ts',
-  `${allExports.trimRight()}\nexport { default as ${className} } from './components/${tagNameWithoutPrefix}/${tagNameWithoutPrefix}';\n`,
-  'utf8'
-);
-
-// Add it to _sidebar.md
-const sidebar = fs.readFileSync('docs/_sidebar.md', 'utf8');
-fs.writeFileSync(
-  'docs/_sidebar.md',
-  sidebar.replace('- Components', `- Components\n  - [${readableName}](/components/${tagNameWithoutPrefix}.md)`),
-  'utf8'
-);
-
-console.log(chalk.green(`The <${tagName}> component has been created:`));
-console.log(`
-- created ${componentFile}
-- created ${stylesFile}
-- created ${docsFile}
-- updated src/shoelace.ts
-- updated docs/_sidebar.md
-
-Use ${chalk.cyan('npm start')} to launch the dev server.
-`);

scripts/plop/plopfile.cjs

@@ -0,0 +1,67 @@
+module.exports = function (plop) {
+  plop.setHelper('tagWithoutPrefix', tag => tag.replace(/^sl-/, ''));
+
+  plop.setHelper('tagToTitle', tag => {
+    const withoutPrefix = plop.getHelper('tagWithoutPrefix');
+    const titleCase = plop.getHelper('titleCase');
+    return titleCase(withoutPrefix(tag));
+  });
+
+  plop.setGenerator('component', {
+    description: 'Generate a new component',
+    prompts: [
+      {
+        type: 'input',
+        name: 'tag',
+        message: 'Tag name? (e.g. sl-button)',
+        validate: value => {
+          // Start with sl- and include only a-z + dashes
+          if (!/^sl-[a-z-+]+/.test(value)) {
+            return false;
+          }
+
+          // No double dashes or ending dash
+          if (value.includes('--') || value.endsWith('-')) {
+            return false;
+          }
+
+          return true;
+        }
+      }
+    ],
+    actions: [
+      {
+        type: 'add',
+        path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.ts',
+        templateFile: 'templates/component/component.hbs'
+      },
+      {
+        type: 'add',
+        path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.scss',
+        templateFile: 'templates/component/styles.hbs'
+      },
+      {
+        type: 'add',
+        path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.test.ts',
+        templateFile: 'templates/component/tests.hbs'
+      },
+      {
+        type: 'add',
+        path: '../../docs/components/{{ tagWithoutPrefix tag }}.md',
+        templateFile: 'templates/component/docs.hbs'
+      },
+      {
+        type: 'modify',
+        path: '../../docs/_sidebar.md',
+        pattern: /<!--plop:component-->/,
+        template: `- [{{ tagToTitle tag }}](/components/{{ tagWithoutPrefix tag }})\n  <!--plop:component-->`
+      },
+      {
+        type: 'modify',
+        path: '../../src/shoelace.ts',
+        pattern: /\/\* plop:component \*\//,
+        template: `export { default as {{ properCase tag }} } from './components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}';\n/* plop:component */`
+      }
+    ]
+  });
+};

scripts/plop/templates/component/component.hbs

@@ -0,0 +1,36 @@
+import { LitElement, html, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { event, EventEmitter } from '../../internal/decorators';
+import styles from 'sass:./{{ tagWithoutPrefix tag }}.scss';
+
+/**
+ * @since 2.0
+ * @status experimental
+ *
+ * @dependency sl-example
+ *
+ * @slot - The default slot.
+ * @slot example - An example slot.
+ *
+ * @part base - The component's base wrapper.
+ */
+@customElement('{{ tag }}')
+export default class {{ properCase tag }} extends LitElement {
+  static styles = unsafeCSS(styles);
+
+  /** An example property. */
+  @property() prop = 'example';
+
+  /** An example event. */
+  @event('sl-event') slEvent: EventEmitter<void>;
+
+  render() {
+    return html` <slot></slot> `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    '{{ tag }}': {{ properCase tag }};
+  }
+}

scripts/plop/templates/component/docs.hbs

@@ -0,0 +1,21 @@
+# {{ tagToTitle tag }}
+
+[component-header:{{ tag }}]
+
+A description of the component goes here.
+
+```html preview
+<{{ tag }}></{{ tag }}>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO
+
+[component-metadata:{{ tag }}]

scripts/plop/templates/component/styles.hbs

@@ -0,0 +1 @@
+@use '../../styles/component';

scripts/plop/templates/component/tests.hbs

@@ -0,0 +1,13 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+// import sinon from 'sinon';
+
+import '../../../dist/shoelace.js';
+import type {{ properCase tag }} from './{{ tagWithoutPrefix tag }}';
+
+describe('<{{ tag }}>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <{{ tag }}></{{ tag }}> `);
+
+    expect(el).to.exist;
+  });
+});

src/shoelace.ts

@@ -45,6 +45,7 @@ export { default as SlTabPanel } from './components/tab-panel/tab-panel';
 export { default as SlTag } from './components/tag/tag';
 export { default as SlTextarea } from './components/textarea/textarea';
 export { default as SlTooltip } from './components/tooltip/tooltip';
+/* plop:component */
 
 // Utilities
 export * from './utilities/animation';