WIP

package.json

@@ -37,51 +37,48 @@
     "build:media": "vite build --config ./src/components/media/vite.media.config.ts",
     "build:stat": "vite build --config ./src/components/stat/vite.stat.config.ts",
     "build:stub": "vite build --config ./src/components/stub/vite.stub.config.ts",
-    "build:all": "npm run build:alert && npm run build:banner && npm npm run build:brandbar && npm run build:button && npm run build:callout && npm run build:card && npm run build:cta && npm run build:grid && npm run build:headline && npm run build:inline && npm run build:logo && npm run build:media && npm run build:stat && npm run build:stub"
+    "build:all": "npm run build:alert && npm run build:banner && npm run build:brandbar && npm run build:button && npm run build:callout && npm run build:card && npm run build:cta && npm run build:grid && npm run build:headline && npm run build:inline && npm run build:logo && npm run build:media && npm run build:stub"
   },
   "dependencies": {
     "vue": "^3.3.13"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.2.0",
-    "@storybook/addon-essentials": "^7.5.2",
-    "@storybook/addon-interactions": "^7.5.2",
-    "@storybook/addon-links": "^7.5.2",
-    "@storybook/blocks": "^7.5.2",
+    "@rushstack/eslint-patch": "^1.6.1",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
+    "@storybook/blocks": "^7.6.6",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/vue3": "^7.5.2",
-    "@storybook/vue3-vite": "^7.5.2",
-    "@types/jsdom": "^16.2.14",
-    "@types/node": "^16.11.26",
+    "@storybook/vue3": "^7.6.6",
+    "@storybook/vue3-vite": "7.6.6",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^18.19.3",
     "@vitejs/plugin-vue": "^4.5.2",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.3",
     "@vue/tsconfig": "^0.5.1",
     "@whitespace/storybook-addon-html": "^5.1.6",
-    "babel-loader": "^8.2.4",
-    "cypress": "^9.5.3",
-    "eslint": "^8.5.0",
-    "eslint-plugin-cypress": "^2.12.1",
+    "babel-loader": "^9.1.3",
+    "cypress": "^13.6.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-vue": "^8.2.0",
+    "eslint-plugin-vue": "^9.19.2",
     "glob": "^10.3.10",
-    "jsdom": "^19.0.0",
-    "prettier": "^2.8.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-syntax-highlighter": "^15.5.0",
+    "jsdom": "^23.0.1",
+    "prettier": "^3.1.1",
     "sass": "^1.50.0",
     "start-server-and-test": "^1.14.0",
-    "storybook": "^7.6.3",
-    "typescript": "~4.6.3",
+    "storybook": "^7.6.6",
+    "typescript": "~5.3.3",
     "vite": "^5.0.10",
     "vite-plugin-dts": "^3.6.4",
     "vite-plugin-static-copy": "^1.0.0",
     "vitest": "^1.1.0",
     "vue-loader": "^17.3.1",
-    "vue-tsc": "^1.8.25"
+    "vue-tsc": "^1.8.26"
   },
   "resolutions": {
     "jackspeak": "2.1.1"

src/components/button/main.ts

@@ -1,5 +1,6 @@
 import { defineCustomElement } from 'vue';
 import Button from './Button.vue';
+import { VueElement } from "@vue/test-utils/dist/types";
 const ButtonElement = defineCustomElement(Button);
 function loader() {
   const ceRegistry = window.customElements;
@@ -13,7 +14,7 @@ function loader() {
   }
 }
 
-const ceRegistry = window.customElements
+const ceRegistry: CustomElementRegistry = window.customElements;
 if (ceRegistry !== null) {
   if (typeof ceRegistry.get('uids-button') === 'undefined') {
     ceRegistry.define('uids-button', ButtonElement);
@@ -22,9 +23,15 @@ if (ceRegistry !== null) {
 
 declare module 'vue' {
   export interface GlobalComponents {
-    'ButtonElement': typeof ButtonElement
+    ButtonElement: typeof ButtonElement;
   }
 }
 console.log('hellow world');
 
 export { Button, ButtonElement, loader };
+export interface ButtonElementIV extends VueElement {
+
+}
+export interface ButtonElementIH extends HTMLElement {
+
+}

src/components/inline/main.ts

@@ -0,0 +1,30 @@
+import { defineCustomElement } from 'vue';
+import Figure from './Figure.vue';
+const FigureElement = defineCustomElement(Figure);
+function loader() {
+  const ceRegistry = window.customElements;
+  if (ceRegistry === null) {
+    return;
+  } else {
+    if (typeof ceRegistry.get('uids-figure') === 'undefined') {
+      ceRegistry.define('uids-figure', FigureElement);
+    }
+    return;
+  }
+}
+
+const ceRegistry = window.customElements
+if (ceRegistry !== null) {
+  if (typeof ceRegistry.get('uids-figure') === 'undefined') {
+    ceRegistry.define('uids-figure', FigureElement);
+  }
+}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    'FigureElement': typeof FigureElement
+  }
+}
+console.log('hellow world');
+
+export { Figure, FigureElement, loader };

src/components/inline/vite.inline.config.ts

@@ -0,0 +1,63 @@
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+const componentName = 'inline';
+
+// if ( componentName === '') {
+//   throw new Error('LIB_NAME is not defined or is blank');
+// } else if (componentsList.includes(componentName) === false) {
+//   throw new Error('LIB_NAME does not exist in componentsConfig object');
+// }
+
+const entry = `src/components/${componentName}/main.ts`;
+const fileName = `${componentName}`;
+const outDir = `./dist/${componentName}`;
+const name = `${componentName}`;
+const src = `package.json`;
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  define: { 'process.env.NODE_ENV': '"production"' },
+  assetsInclude: [
+    './package.json',
+  ],
+  plugins: [
+    vue( {customElement: true} ),
+    dts(),
+    viteStaticCopy({
+      targets: [
+        {
+          src: src,
+          dest: ``,
+        },
+      ],
+    })
+  ],
+  logLevel: 'info',
+  build: {
+    outDir: outDir,
+    lib: {
+      entry: entry,
+      name: name,
+      fileName: fileName
+    },
+    // rollupOptions: {
+    //   external: ["vue"],
+    //   output: {
+    //     globals: {
+    //       vue: "Vue"
+    //     }
+    //   }
+    // }
+  },
+  // resolve: {
+  //   alias: {
+  //     '@': fileURLToPath(new URL('./src', import.meta.url))
+  //   }
+  // },
+  // assetsInclude: [
+  //   './package.json',
+  // ],
+});

src/main.ts

@@ -16,6 +16,7 @@ import Card from './components/card/Card.vue';
 import Cta from './components/cta/Cta.vue';
 import Grid from './components/grid/Grid.vue';
 import Headline from './components/headline/Headline.vue';
+import Figure from "@/components/inline/Figure.vue";
 import Logo from './components/logo/Logo.vue';
 import Media from './components/media/Media.vue';
 
@@ -27,6 +28,7 @@ const ButtonElement = defineCustomElement(Button);
 const CalloutElement = defineCustomElement(Callout);
 const CardElement = defineCustomElement(Card);
 const CtaElement = defineCustomElement(Cta);
+const FigureElement = defineCustomElement(Figure);
 const GridElement = defineCustomElement(Grid);
 const HeadlineElement = defineCustomElement(Headline);
 const LogoElement = defineCustomElement(Logo);
@@ -40,6 +42,7 @@ customElements.define('uids-button', ButtonElement);
 customElements.define('uids-callout', CalloutElement);
 customElements.define('uids-card', CardElement);
 customElements.define('uids-cta', CtaElement);
+customElements.define('uids-figure', FigureElement);
 customElements.define('uids-grid', GridElement);
 customElements.define('uids-headline', HeadlineElement);
 customElements.define('uids-logo', LogoElement);
@@ -69,6 +72,9 @@ function loader(): void {
     if (typeof (ceRegistry.get('uids-cta')) === 'undefined') {
       ceRegistry.define('uids-cta', CtaElement);
     }
+    if (typeof (ceRegistry.get('uids-figure')) === 'undefined') {
+      ceRegistry.define('uids-figure', FigureElement);
+    }
     if (typeof (ceRegistry.get('uids-grid')) === 'undefined') {
       ceRegistry.define('uids-grid', GridElement);
     }
@@ -96,6 +102,7 @@ declare module 'vue' {
     'CalloutElement': typeof CalloutElement,
     'CardElement': typeof CardElement,
     'CtaElement': typeof CtaElement,
+    'FigureElement': typeof FigureElement;
     'GridElement': typeof GridElement,
     'HeadlineElement': typeof HeadlineElement,
     'LogoElement': typeof LogoElement,
@@ -112,6 +119,7 @@ export {
   Callout,
   Card,
   Cta,
+  Figure,
   Grid,
   Headline,
   Logo,
@@ -123,6 +131,7 @@ export {
   CalloutElement,
   CardElement,
   CtaElement,
+  FigureElement,
   GridElement,
   HeadlineElement,
   LogoElement,

tsconfig.app.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
+//  "extends": "@vue/tsconfig/tsconfig.web.json",
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {

tsconfig.json

@@ -1,14 +1,18 @@
 {
   "files": [],
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true
+  },
   "references": [
-    {
-      "path": "./tsconfig.vite-config.json"
-    },
+//    {
+//      "path": "./tsconfig.vite-config.json"
+//    },
     {
       "path": "./tsconfig.app.json"
     },
-    {
-      "path": "./tsconfig.vitest.json"
-    }
+//    {
+//      "path": "./tsconfig.vitest.json"
+//    }
   ]
 }