Merge pull request #138 from break-stuff/vue-add-prefix-and-suffix

Vue add prefix and suffix

.prettierrc.mjs

@@ -3,7 +3,6 @@
  * @type {import("prettier").Config}
  */
 const config = {
-  trailingComma: "all",
   tabWidth: 2,
   semi: true,
   singleQuote: false,

demo/lit-app/custom-element-jsx.d.ts

@@ -1,4 +1,7 @@
-import type { RadioGroup, InterfaceEventType } from "./dist/radio-group/RadioGroup.d.ts";
+import type {
+  RadioGroup,
+  InterfaceEventType,
+} from "./dist/radio-group/RadioGroup.d.ts";
 import type { RadioButton } from "./dist/radio-button/RadioButton.d.ts";
 import type { DeprecatedElement } from "./dist/deprecated-element/DeprecatedElement.d.ts";
 import type { MyButton } from "./dist/my-button/MyButton.d.ts";
@@ -20,7 +23,10 @@ import type { MyButton } from "./dist/my-button/MyButton.d.ts";
  * ```
  *
  */
-export type ScopedElements<Prefix extends string = "", Suffix extends string = ""> = {
+export type ScopedElements<
+  Prefix extends string = "",
+  Suffix extends string = "",
+> = {
   [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
 };
 
@@ -179,7 +185,9 @@ export type CustomElements = {
    * ---
    *
    */
-  "deprecated-element": Partial<DeprecatedElementProps | BaseProps | BaseEvents>;
+  "deprecated-element": Partial<
+    DeprecatedElementProps | BaseProps | BaseEvents
+  >;
 
   /**
    *

demo/lit-app/custom-element-vuejs.d.ts

@@ -1,6 +1,9 @@
 import type { DefineComponent } from "vue";
 
-import type { RadioGroup, InterfaceEventType } from "./dist/radio-group/RadioGroup.d.ts";
+import type {
+  RadioGroup,
+  InterfaceEventType,
+} from "./dist/radio-group/RadioGroup.d.ts";
 import type { RadioButton } from "./dist/radio-button/RadioButton.d.ts";
 import type { DeprecatedElement } from "./dist/deprecated-element/DeprecatedElement.d.ts";
 import type { MyButton } from "./dist/my-button/MyButton.d.ts";

demo/lit-app/custom-elements-svelte.d.ts

@@ -1,4 +1,7 @@
-import type { RadioGroup, InterfaceEventType } from "./dist/radio-group/RadioGroup.d.ts";
+import type {
+  RadioGroup,
+  InterfaceEventType,
+} from "./dist/radio-group/RadioGroup.d.ts";
 import type { RadioButton } from "./dist/radio-button/RadioButton.d.ts";
 import type { DeprecatedElement } from "./dist/deprecated-element/DeprecatedElement.d.ts";
 import type { MyButton } from "./dist/my-button/MyButton.d.ts";
@@ -156,7 +159,9 @@ export type CustomElements = {
    * ---
    *
    */
-  "deprecated-element": Partial<DeprecatedElementProps | BaseProps | BaseEvents>;
+  "deprecated-element": Partial<
+    DeprecatedElementProps | BaseProps | BaseEvents
+  >;
 
   /**
    *

demo/lit-app/loader.js

@@ -68,7 +68,7 @@ async function load(root) {
   const rootTagName = root instanceof Element ? root.tagName.toLowerCase() : "";
   const tags =
     [...root.querySelectorAll(":not(:defined)")]?.map((el) =>
-      el.tagName.toLowerCase()
+      el.tagName.toLowerCase(),
     ) || [];
   if (rootTagName.includes("-") && !customElements.get(rootTagName)) {
     tags.push(rootTagName);
@@ -97,7 +97,7 @@ function register(tagName) {
       })
       .catch(() => {
         console.error(
-          `Unable to load <${tagName}> from ${component.importPath}`
+          `Unable to load <${tagName}> from ${component.importPath}`,
         );
         reject();
       });

demo/lit-app/solid-js.d.ts

@@ -1,6 +1,9 @@
 import type { JSX } from "solid-js";
 
-import type { RadioGroup, InterfaceEventType } from "./dist/radio-group/RadioGroup.d.ts";
+import type {
+  RadioGroup,
+  InterfaceEventType,
+} from "./dist/radio-group/RadioGroup.d.ts";
 import type { RadioButton } from "./dist/radio-button/RadioButton.d.ts";
 import type { DeprecatedElement } from "./dist/deprecated-element/DeprecatedElement.d.ts";
 import type { MyButton } from "./dist/my-button/MyButton.d.ts";
@@ -22,7 +25,10 @@ import type { MyButton } from "./dist/my-button/MyButton.d.ts";
  * ```
  *
  */
-export type ScopedElements<Prefix extends string = "", Suffix extends string = ""> = {
+export type ScopedElements<
+  Prefix extends string = "",
+  Suffix extends string = "",
+> = {
   [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
 };
 
@@ -179,7 +185,9 @@ export type CustomElements = {
    * ---
    *
    */
-  "deprecated-element": Partial<DeprecatedElementProps | BaseProps | BaseEvents>;
+  "deprecated-element": Partial<
+    DeprecatedElementProps | BaseProps | BaseEvents
+  >;
 
   /**
    *

packages/react-wrappers/src/wrapper-generator.ts

@@ -14,7 +14,13 @@ import {
   saveReactUtils,
   saveScopeProvider,
 } from "./utils.js";
-import { createOutDir, log, logGreen, logYellow, saveFile } from "../../../tools/integrations/index.js";
+import {
+  createOutDir,
+  log,
+  logGreen,
+  logYellow,
+  saveFile,
+} from "../../../tools/integrations/index.js";
 import {
   CEM,
   Component,
@@ -43,10 +49,7 @@ export function generateReactWrappers(
     logYellow("[react-wrappers] - Skipped", options.hideLogs);
     return;
   }
-  log(
-    "[react-wrappers] - Generating wrappers...",
-    options.hideLogs
-  );
+  log("[react-wrappers] - Generating wrappers...", options.hideLogs);
 
   updateConfig(options);
   const components = getComponents(customElementsManifest, config.exclude);
@@ -87,7 +90,10 @@ export function generateReactWrappers(
   });
 
   generateManifests(components, config.outdir!);
-  logGreen(`[react-wrappers] - Generated wrappers in "${config.outdir}".`, config.hideLogs);
+  logGreen(
+    `[react-wrappers] - Generated wrappers in "${config.outdir}".`,
+    config.hideLogs,
+  );
 }
 
 function updateConfig(options: Options) {

packages/vuejs-integration/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 1.3.0
+
+- Add tag name prefix and suffix support
+
 ## 1.2.0
 
 - Added the ability to hide logs

packages/vuejs-integration/README.md

@@ -115,6 +115,10 @@ The configuration has the following optional parameters:
   hideLogs?: boolean;
   /** Prevents plugin from executing */
   skip?: boolean;
+  /** Adds a prefix to tag name references */
+  prefix?: string;
+  /** Adds a suffix to tag name references */
+  suffix?: string;
 }
 ```
 

packages/vuejs-integration/package.json

@@ -1,6 +1,6 @@
 {
   "name": "custom-element-vuejs-integration",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Types for integrating custom elements into Vue.js projects",
   "main": "index.js",
   "module": "index.js",

packages/vuejs-integration/src/type-generator.ts

@@ -45,15 +45,14 @@ export function generateVuejsTypes(manifest: any, options: Options) {
 }
 
 function getOptions(options: Options) {
-  options.fileName =
-    options.fileName === undefined
-      ? "custom-element-vuejs.d.ts"
-      : options.fileName;
-  options.exclude = options.exclude === undefined ? [] : options.exclude;
-  options.outdir = options.outdir === undefined ? "./" : options.outdir;
-  options.prefix = options.prefix === undefined ? "" : options.prefix;
-  options.suffix = options.suffix === undefined ? "" : options.suffix;
-  return options;
+  return {
+    fileName: "custom-element-vuejs.d.ts",
+    exclude: [],
+    outdir: "./",
+    prefix: "",
+    suffix: "",
+    ...options,
+  };
 }
 
 function getTypeTemplate(components: Component[], options: Options) {

packages/vuejs-integration/src/types.d.ts

@@ -16,9 +16,9 @@ export interface Options extends BaseOptions {
   typesSrc?: string;
   /** Used to add global element props to all component types */
   globalEvents?: string;
-  /** Adds a prefix to tag references */
+  /** Adds a prefix to tag name references */
   prefix?: string;
-  /** Adds a suffix to tag references */
+  /** Adds a suffix to tag name references */
   suffix?: string;
 }