@patternfly/create-element - npm Package Compare versions

Comparing version 1.0.0-next.10 to 1.0.0-next.11

generator/element.js

@@ -28,4 +28,6 @@ import Case from "case";
   InterpolationKey2["className"] = "className";
-  InterpolationKey2["cssName"] = "cssName";
+  InterpolationKey2["scssName"] = "scssName";
+  InterpolationKey2["cssRelativePath"] = "cssRelativePath";
   InterpolationKey2["packageName"] = "packageName";
+  InterpolationKey2["importSpecifier"] = "importSpecifier";
   InterpolationKey2["readmeName"] = "readmeName";
@@ -37,16 +39,2 @@ InterpolationKey2["scope"] = "scope";
 })(InterpolationKey || {});
-const TEMPLATE_FILE_PATHS = {
-  cemConfig: "custom-elements-manifest.config.js",
-  component: "element.ts",
-  demo: "demo/element.html",
-  demoCss: "demo/element.css",
-  demoScript: "demo/element.js",
-  docs: "docs/index.md",
-  package: "package.json",
-  readme: "README.md",
-  style: "element.scss",
-  test: "test/element.spec.ts",
-  e2e: "test/element.e2e.spec.ts",
-  tsconfig: "tsconfig.json"
-};
 function isMonorepoFileKey(key) {
@@ -71,3 +59,3 @@ switch (key) {
   readme: "README.md",
-  style: `${options.tagName}.scss`,
+  style: `${options.tagName}.${options.css === "postcss" ? ".postcss.css" : options.css}`,
   test: `test/${options.tagName}.spec.ts`,
@@ -82,3 +70,3 @@ e2e: `test/${options.tagName}.e2e.spec.ts`,
   const { tagName } = options;
-  const [, tagPrefix, cssName] = tagName.match(/^(\w+)-(.*)/) ?? [];
+  const [, tagPrefix, scssName] = tagName.match(/^(\w+)-(.*)/) ?? [];
   const className = Case.pascal(options.tagName);
@@ -88,5 +76,9 @@ const readmeName = Case.title(options.tagName.replace(/^\w+-(.*)/, "$1"));
   const packageName = `${scope}${tagName}`;
+  const cssRelativePath = `./${options.css === "postcss" ? `${tagName}.postcss.css` : `${tagName}.${options.css}`}`;
+  const importSpecifier = options.monorepo ? packageName : `@rhds/elements/${tagName}/${tagName}.js`;
   return {
     className,
-    cssName,
+    scssName,
+    cssRelativePath,
+    importSpecifier,
     packageName,
@@ -115,4 +107,5 @@ readmeName,
 }
-async function getTemplate(key) {
+async function getTemplate(key, options) {
   const TEMPLATE_DIR = join(__dirname, "..", "templates", "element");
+  const TEMPLATE_FILE_PATHS = getFilePathsRelativeToPackageDir({ ...options, tagName: "element" });
   return await readFile(join(TEMPLATE_DIR, TEMPLATE_FILE_PATHS[key]), "utf8");
@@ -125,3 +118,3 @@ }
   const PATH = getOutputFilePath(key, options);
-  const TEMPLATE = await getTemplate(key);
+  const TEMPLATE = await getTemplate(key, options);
   const DATA = getInterpolations(options);
@@ -175,3 +168,3 @@ const OUTPUT = processTemplate(TEMPLATE, DATA);
   if (config?.compilerOptions?.paths) {
-    config.compilerOptions.paths[packageName] = [join(`./elements/${tagName}/${tagName}.ts`)];
+    config.compilerOptions.paths[packageName] = [`./elements/${tagName}/${tagName}.ts`];
   }
@@ -192,3 +185,2 @@ if (!config.references?.some((x) => x.path === `./elements/${tagName}`)) {
     await writeElementFiles(options);
-    await analyzeElement(options);
     if (options.monorepo) {
@@ -195,0 +187,0 @@ await updateTsconfig(options);

main.d.ts

 export interface BaseOptions {
+    /** Should console output be omitted? */
     silent: boolean;
     directory: string;
+    /** Should existing files be overwritten */
     overwrite: boolean;
+    /** Is this a monorepo */
     monorepo: boolean;
+    /** Which type of CSS files should the generator output? */
+    css: 'css' | 'postcss' | 'scss';
 }
-export interface AppOptions extends BaseOptions {
-    packageDefaults: boolean;
-    install: boolean;
-    start: boolean;
-}
 export interface GenerateElementOptions extends BaseOptions {
@@ -13,0 +13,0 @@ /** The element's tagname e.g. `pfe-button` */

main.js

@@ -84,2 +84,6 @@ import { generateElement } from "./generator/element.js";
     description: "Generate an npm package for the element"
+  }).option("css", {
+    type: "boolean",
+    default: await isMonorepo() ? "scss" : "css",
+    description: "Which type of CSS files to output"
   }).help().check(({ name }) => {
@@ -86,0 +90,0 @@ if (typeof name === "string" && !name.includes("-")) {

package.json

 {
   "name": "@patternfly/create-element",
-  "version": "1.0.0-next.10",
+  "version": "1.0.0-next.11",
   "description": "Scaffold web components monorepos based on PatternFly Elements",
@@ -5,0 +5,0 @@ "author": "Benny Powers <[e-mail]>",

templates/element/demo/element.js

@@ -1,2 +0,2 @@
-import '<%= packageName %>';
+import '<%= importSpecifier %>';
 
@@ -3,0 +3,0 @@ const root = document.querySelector('[data-demo="<%= tagName %>"]')?.shadowRoot ?? document;

templates/element/element.ts

@@ -6,3 +6,3 @@ import { LitElement, html } from 'lit';
 
-import styles from './<%= tagName %>.scss';
+import styles from '<%= cssRelativePath %>';
 
@@ -29,3 +29,3 @@ /**
     '<%= tagName %>': <%= className %>;
-  }
 }
+}

templates/element/test/element.spec.ts

 import { expect, html } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { <%= className %> } from '<%= scope %><%= tagName %>';
+import { <%= className %> } from '<%= importSpecifier %>';
 
@@ -11,3 +11,3 @@ const element = html`
   it('should upgrade', async function() {
-    const el = await createFixture<<%= className %>>(element);
+    const el = await createFixture <<%= className %>> (element);
     const klass = customElements.get('<%= tagName %>');
@@ -14,0 +14,0 @@ expect(el)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19862

increased by2.01%

Number of package files

23

increased by4.55%

Worsened metrics

Lines of code

442

decreased by-0.23%

No dependency changes