Implement lit init element

.changeset/wild-pillows-carry.md

@@ -0,0 +1,6 @@
+---
+'@lit-labs/cli': minor
+'@lit-labs/gen-utils': minor
+---
+
+Implemented lit init element command

.prettierignore

@@ -146,6 +146,7 @@ packages/labs/cli/index.d.ts
 packages/labs/cli/index.d.ts.map
 packages/labs/cli/test-gen/
 
+packages/labs/cli/test-goldens/
 packages/labs/cli-localize/lib/
 packages/labs/cli-localize/node_modules/
 

packages/labs/cli/.prettierignore

@@ -0,0 +1 @@
+/test-goldens/

packages/labs/cli/package.json

@@ -62,7 +62,8 @@
       "command": "tsc --pretty --noEmit",
       "files": [
         "tsconfig.json",
-        "src/**/*"
+        "src/**/*",
+        "test-goldens/**/*"
       ],
       "output": []
     },

packages/labs/cli/src/lib/commands/help.ts

@@ -88,7 +88,13 @@ export const makeHelpCommand = (cli: LitCli): ResolvedCommand => {
     ],
 
     async run(options: CommandOptions, console: Console) {
-      const commandNames = options['command'] as Array<string> | null;
+      let commandNames = options['command'] as Array<string> | string | null;
+
+      if (typeof commandNames === 'string') {
+        commandNames = commandNames?.split(' ') ?? [];
+      }
+
+      commandNames = commandNames?.map((c) => c.trim()) ?? null;
 
       if (commandNames == null) {
         console.debug('no command given, printing general help...', {options});

packages/labs/cli/src/lib/commands/init.ts

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {Command, CommandOptions} from '../command.js';
+import {run} from '../init/element-starter/index.js';
+import {LitCli} from '../lit-cli.js';
+
+export type Language = 'ts' | 'js';
+export interface InitCommandOptions {
+  lang: Language;
+  name: string;
+  dir: string;
+}
+
+export const makeInitCommand = (cli: LitCli): Command => {
+  return {
+    kind: 'resolved',
+    name: 'init',
+    description: 'Initialize a Lit project',
+    subcommands: [
+      {
+        kind: 'resolved',
+        name: 'element',
+        description: 'Generate a shareable element starter package',
+        options: [
+          {
+            name: 'lang',
+            defaultValue: 'js',
+            description:
+              'Which language to use for the element. Supported languages: js, ts',
+          },
+          {
+            name: 'name',
+            defaultValue: 'my-element',
+            description:
+              'Tag name of the Element to generate (must include a hyphen).',
+          },
+          {
+            name: 'dir',
+            defaultValue: '.',
+            description: 'Directory in which to generate the element package.',
+          },
+        ],
+        async run(options: CommandOptions, console: Console) {
+          const name = options.name as string;
+          /*
+           * This is a basic check to ensure that the name is a valid custom
+           * element name. Will make sure you you start off with a character and
+           * at least one hyphen plus more characters. Will not check for the
+           * following invalid use cases:
+           *   - starting with a digit
+           *
+           * Will not allow the following valid use cases:
+           *   - including a unicode character as not the first character
+           */
+          const customElementMatch = name.match(/\w+(-\w+)+/g);
+          if (!customElementMatch || customElementMatch[0] !== name) {
+            throw new Error(
+              `"${name}" is not a valid custom-element name. (Must include a hyphen and ascii characters)`
+            );
+          }
+          return await run(
+            options as unknown as InitCommandOptions,
+            console,
+            cli
+          );
+        },
+      },
+    ],
+    async run(_options: CommandOptions, console: Console) {
+      // by default run the element command
+      return await run(
+        {lang: 'js', name: 'my-element', dir: '.'},
+        console,
+        cli
+      );
+    },
+  };
+};

packages/labs/cli/src/lib/init/element-starter/index.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {FileTree, writeFileTree} from '@lit-labs/gen-utils/lib/file-utils.js';
+import {generateTsconfig} from './templates/tsconfig.json.js';
+import {generatePackageJson} from './templates/package.json.js';
+import {generateIndex} from './templates/demo/index.html.js';
+import {generateGitignore} from './templates/gitignore.js';
+import {generateNpmignore} from './templates/npmignore.js';
+import {generateElement} from './templates/lib/element.js';
+import {CommandResult} from '../../command.js';
+import {InitCommandOptions} from '../../commands/init.js';
+import {LitCli} from '../../lit-cli.js';
+import path from 'path';
+
+export const generateLitElementStarter = async (
+  options: InitCommandOptions
+): Promise<FileTree> => {
+  const {name, lang} = options;
+  let files = {
+    ...generatePackageJson(name, lang),
+    ...generateIndex(name),
+    ...generateGitignore(lang),
+    ...generateNpmignore(),
+    ...generateElement(name, lang),
+  };
+  if (lang === 'ts') {
+    files = {
+      ...files,
+      ...generateTsconfig(),
+    };
+  }
+  return files;
+};
+
+export const run = async (
+  options: InitCommandOptions,
+  console: Console,
+  cli: LitCli
+): Promise<CommandResult> => {
+  const files = await generateLitElementStarter(options);
+  const outPath = path.join(cli.cwd, options.dir, options.name);
+  await writeFileTree(outPath, files);
+  const relativePath = path.relative(cli.cwd, outPath);
+  console.log(`Created sharable element in ${relativePath}/.`);
+  return {
+    exitCode: 0,
+  };
+};

packages/labs/cli/src/lib/init/element-starter/templates/demo/index.html.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {FileTree} from '@lit-labs/gen-utils/lib/file-utils.js';
+import {html} from '@lit-labs/gen-utils/lib/str-utils.js';
+
+export const generateIndex = (elementName: string): FileTree => {
+  return {
+    demo: {
+      'index.html': html`<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>${elementName} demo</title>
+    <script type="module" src="../lib/${elementName}.js"></script>
+  </head>
+  <body>
+    <${elementName}></${elementName}>
+  </body>
+</html>`,
+    },
+  };
+};

packages/labs/cli/src/lib/init/element-starter/templates/gitignore.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {FileTree} from '@lit-labs/gen-utils/lib/file-utils.js';
+import {Language} from '../../../commands/init.js';
+
+export const generateGitignore = (lang: Language): FileTree => {
+  return {
+    '.gitignore': `node_modules${
+      lang !== 'ts'
+        ? ''
+        : `
+lib`
+    }`,
+  };
+};

packages/labs/cli/src/lib/init/element-starter/templates/lib/element.ts

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {FileTree} from '@lit-labs/gen-utils/lib/file-utils.js';
+import {
+  javascript,
+  kabobToPascalCase,
+} from '@lit-labs/gen-utils/lib/str-utils.js';
+import {Language} from '../../../../commands/init.js';
+
+export const generateElement = (
+  elementName: string,
+  language: Language
+): FileTree => {
+  const directory = language === 'js' ? 'lib' : 'src';
+  return {
+    [directory]: {
+      [`${elementName}.${language}`]:
+        language === 'js'
+          ? generateTemplate(elementName, language)
+          : generateTemplate(elementName, language),
+    },
+  };
+};
+
+const generateTemplate = (elementName: string, lang: Language) => {
+  const className = kabobToPascalCase(elementName);
+  return javascript`import {LitElement, html, css} from 'lit';${
+    lang === 'js'
+      ? ''
+      : `
+import {property, customElement} from 'lit/decorators.js';`
+  }
+
+/**
+ * An example element.
+ *
+ * @fires count-changed - Indicates when the count changes
+ * @slot - This element has a slot
+ * @csspart button - The button
+ * @cssprop --${elementName}-font-size - The button's font size
+ */${
+   lang === 'js'
+     ? ''
+     : `
+@customElement('${elementName}')`
+ }
+export class ${className} extends LitElement {
+  static styles = css\`
+    :host {
+      display: block;
+      border: solid 1px gray;
+      padding: 16px;
+    }
+
+    button {
+      font-size: var(--${elementName}-font-size, 16px);
+    }
+  \`;
+
+  ${
+    lang === 'js'
+      ? `static properties = {
+    /**
+     * The number of times the button has been clicked.
+     * @type {number}
+     */
+    count: {type: Number},
+  }
+
+  constructor() {
+    super();
+    this.count = 0;
+  }`
+      : `/**
+   * The number of times the button has been clicked.
+   */
+  @property({type: Number})
+  count = 0;`
+  }
+
+  render() {
+    return html\`
+      <h1>Hello World</h1>
+      <button @click=\${this._onClick} part="button">
+        Click Count: \${this.count}
+      </button>
+      <slot></slot>
+    \`;
+  }
+
+  ${lang === 'js' ? '' : 'protected '}_onClick() {
+    this.count++;
+    const event = new Event('count-changed', {bubbles: true});
+    this.dispatchEvent(event);
+  }
+}
+${
+  lang === 'js'
+    ? `
+customElements.define('${elementName}', ${className});`
+    : ``
+}`;
+};

packages/labs/cli/src/lib/init/element-starter/templates/npmignore.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {FileTree} from '@lit-labs/gen-utils/lib/file-utils.js';
+
+export const generateNpmignore = (): FileTree => {
+  return {
+    '.npmignore': `node_modules
+.vscode
+README.md
+index.html
+src`,
+  };
+};