DS-408: Convert yeoman to plop alternative

__tests__/monorepo-deps.test.js

@@ -54,7 +54,7 @@ const boltPkgs = getPkgList();
 
 describe.skip('Bolt Components declare dependencies in package.json if used in Twig files', () => {
   const excludedPkgs = [
-    '@bolt/generator-bolt',
+    '@bolt/bolt-generator',
     '@bolt/components-editor',
     '@bolt/uikit-workshop',
   ];

package.json

@@ -42,13 +42,15 @@
   "scripts": {
     "build": "cd docs-site && yarn run build:prod",
     "cc": "yarn create:component",
+    "ce": "yarn create:element",
     "clean": "npx npm-run-all --parallel clean:*",
     "clean:cache": "find . -name 'cache' -type d -exec rm -rf {} +",
     "clean:composer": "find . -name 'vendor' -type d -exec rm -rf {} +",
     "clean:empty": "find . -empty -type d -delete",
     "clean:npm": "find . -name 'node_modules' -type d -exec rm -rf {} +",
     "clean:www": "find . -name 'www' -type d -exec rm -rf {} +",
-    "create:component": "yo ./packages/generators/yeoman-create-component/generators/component/index.js",
+    "create:component": "plop component --plopfile ./packages/generators/bolt-generator/plopfile.js",
+    "create:element": "plop element --plopfile ./packages/generators/bolt-generator/plopfile.js",
     "deploy": "./scripts/deploy.js",
     "fix": "yarn lint:js --fix; yarn lint:scss --fix",
     "gds": "github-deploy-status -u boltdesignsystem -p bolt --token ${GITHUB_TOKEN}",

packages/generators/bolt-generator/__tests__/component/__snapshots__/bolt-generator.js.snap

@@ -0,0 +1,232 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Bolt component generator JS file exist 1`] = `
+"import { html, customElement, BoltElement, unsafeCSS } from '@bolt/element';
+import classNames from 'classnames/bind';
+import styles from './test.scss';
+import schema from '../test.schema';
+
+let cx = classNames.bind(styles);
+
+@customElement('bolt-test')
+class BoltTest extends BoltElement {
+  static schema = schema;
+
+  static get properties() {
+    return {
+      ...this.props,
+    };
+  }
+
+  static get styles() {
+    return [unsafeCSS(styles)];
+  }
+
+  render() {
+    const classes = cx('c-bolt-test', {
+      [\`c-bolt-test--disabled\`]: this.disabled,
+    });
+
+    return html\`
+      <div class=\\"\${classes}\\">
+        \${this.slotify('default')}
+      </div>
+    \`;
+  }
+}
+
+export { BoltTest };
+"
+`;
+
+exports[`Bolt component generator SCSS file exist 1`] = `
+"/* ------------------------------------ *\\\\
+   Test
+\\\\* ------------------------------------ */
+
+@import '@bolt/core-v3.x';
+
+// Register Custom Block Element
+@include bolt-custom-element('bolt-test', block, medium);
+
+/**
+ * Long-form comment.
+ *
+ * This spans multiple lines and is also constrained to no longer than 80
+ * characters in width.
+ *
+ * 1. Provide line-comments like this.
+ */
+.c-bolt-test {
+  // Styles go here. /* [1] */
+  display: block;
+}
+"
+`;
+
+exports[`Bolt component generator folder structure of component package is correct 1`] = `
+Array [
+  "packages/generators/tmp/.boltrc.js",
+  "packages/generators/tmp/docs-site/src/pages/pattern-lab/_patterns/40-components/test/00-test-docs.twig",
+  "packages/generators/tmp/package.json",
+  "packages/generators/tmp/packages/components/bolt-test/README.md",
+  "packages/generators/tmp/packages/components/bolt-test/__tests__/test.js",
+  "packages/generators/tmp/packages/components/bolt-test/index.js",
+  "packages/generators/tmp/packages/components/bolt-test/index.scss",
+  "packages/generators/tmp/packages/components/bolt-test/package.json",
+  "packages/generators/tmp/packages/components/bolt-test/src/test.js",
+  "packages/generators/tmp/packages/components/bolt-test/src/test.scss",
+  "packages/generators/tmp/packages/components/bolt-test/src/test.twig",
+  "packages/generators/tmp/packages/components/bolt-test/test.schema.js",
+]
+`;
+
+exports[`Bolt component generator index JS file exist 1`] = `
+"import './src/test';
+"
+`;
+
+exports[`Bolt component generator index SCSS file exist 1`] = `
+"@import 'src/test.scss';
+"
+`;
+
+exports[`Bolt component generator package.json file exist 1`] = `
+"{
+  \\"name\\": \\"@bolt/components-test\\",
+  \\"version\\": \\"0.0.0\\",
+  \\"description\\": \\"Test description\\",
+  \\"keywords\\": [
+    \\"bolt design system\\"
+  ],
+  \\"homepage\\": \\"https://boltdesignsystem.com\\",
+  \\"bugs\\": {
+    \\"url\\": \\"https://github.com/bolt-design-system/bolt/issues\\"
+  },
+  \\"repository\\": {
+    \\"type\\": \\"git\\",
+    \\"url\\": \\"https://github.com/bolt-design-system/bolt/tree/master/packages/components/bolt-test\\"
+  },
+  \\"license\\": \\"MIT\\",
+  \\"author\\": \\"Test User <test@example.org>\\",
+  \\"main\\": \\"index.js\\",
+  \\"style\\": \\"index.scss\\",
+  \\"dependencies\\": {
+    \\"@bolt/core-v3.x\\": \\"^0.0.0\\"
+  },
+  \\"publishConfig\\": {
+    \\"access\\": \\"public\\"
+  },
+  \\"schema\\": \\"test.schema.js\\",
+  \\"twig\\": \\"src/test.twig\\"
+}
+"
+`;
+
+exports[`Bolt component generator pattern lab file exist 1`] = `
+"{% set usage %}{% verbatim %}
+{% include '@bolt-components-test/test.twig' only %}
+{% endverbatim %}{% endset %}
+
+{% include \\"@utils/docs.twig\\" with {
+  componentName: \\"test\\",
+  usage: usage
+} only %}
+"
+`;
+
+exports[`Bolt component generator readme file exist 1`] = `
+"Test description
+
+###### Install via NPM
+
+\`\`\`
+npm install @bolt/components-test
+\`\`\`
+"
+`;
+
+exports[`Bolt component generator schema file exist 1`] = `
+"module.exports = {
+  $schema: 'http://json-schema.org/draft-04/schema#',
+  title: 'Test',
+  type: 'object',
+  properties: {
+    attributes: {
+      type: 'object',
+      description:
+        'A Drupal attributes object. Applies extra HTML attributes to the &lt;bolt-test&gt; tag.',
+    },
+    disabled: {
+      type: 'boolean',
+      description:
+        'Default \`disabled\` prop supported globally by most Bolt components.',
+      default: false,
+    },
+  },
+};
+"
+`;
+
+exports[`Bolt component generator tests file exist 1`] = `
+"// Refer to https://github.com/boltdesignsystem/bolt/wiki/Jest-Test:-Example-Jest-Test for more testing examples
+import { render, renderWC, stopServer } from '../../../testing/testing-helpers';
+import schema from '../test.schema';
+const componentSelector = 'bolt-test'
+let page, fixtures;
+
+afterAll(async () => {
+  await stopServer();
+  await page.close();
+});
+
+beforeEach(async () => {
+  await page.evaluate(() => {
+    document.body.innerHTML = '';
+  });
+});
+
+beforeAll(async () => {
+  page = await global.__BROWSER__.newPage();
+  await page.goto('http://127.0.0.1:4444/', {
+    timeout: 0,
+  });
+
+  const defaultData = {
+    content: 'This is a test',
+  };
+
+  fixtures = {
+    defaultData,
+  };
+
+});
+
+describe('Bolt Test component', () => {
+  test('default', async () => {
+    const results = await render(
+      '@bolt-components-test/test.twig', {
+      ...fixtures.defaultData,
+    });
+
+    /*
+      Comment out if testing a Web Component
+    */
+    // const { innerHTML, outerHTML } = await renderWC(
+    //   componentSelector,
+    //   results.html,
+    //   page
+    // );
+
+    expect(results.ok).toBe(true);
+    expect(results.html).toMatchSnapshot();
+
+    /*
+      Comment out if testing a Web Component
+    */
+    // await expect(innerHTML).toMatchSnapshot();
+    // await expect(outerHTML).toMatchSnapshot();
+  });
+});
+"
+`;

packages/generators/yeoman-create-component/generators/component/__tests__/component-generator.js → packages/generators/bolt-generator/__tests__/component/bolt-generator.js

@@ -5,7 +5,7 @@ const dir = require('node-dir');
 
 const dirs = {
   global:
-    'packages/generators/yeoman-create-component/generators/component/tmp',
+    'packages/generators/tmp',
   js: 'test.js',
   scss: 'test.scss',
   test: 'test.js',
@@ -20,10 +20,10 @@ dirs.src = `${dirs.component}/src`;
 dirs.testing = `${dirs.component}/__tests__`;
 dirs.patternLab = `${dirs.global}/docs-site/src/pages/pattern-lab/_patterns/40-components/test/00-test-docs.twig`;
 
-describe('Yeoman component generator', () => {
+describe('Bolt component generator', () => {
   beforeAll(async () => {
     shell.exec(`rm -rf ${dirs.global}`);
-    shell.exec('yarn run cc -- -N Test -D "Test Description" -T');
+    shell.exec('yarn cc "Test" "Test Description"');
   });
 
   afterAll(async () => {