Separated run and publish processes

.env

@@ -1 +0,0 @@
-STORYBOOK_DISABLE_TELEMETRY=true

package.json

@@ -5,13 +5,12 @@
   "type": "module",
   "author": "Armco (@restruct-corporate-advantage)",
   "scripts": {
-    "compile": "tsc -b ./tsconfig-build.types.json",
     "dev": "vite",
     "start": "NODE_ENV=production vite",
-    "build": "tsc --p ./tsconfig-build.json && vite build",
+    "build": "tsc && vite build",
+    "build:publish": "tsc --p ./tsconfig-build.json && vite build --config vite-publish.config.ts",
     "build:clean": "rm -rf ./build",
-    "build:types": "NODE_ENV=production tsc --project ./tsconfig-publish.json",
-    "build:sh": "./scripts/build.sh",
+    "build:sh": "./scripts/publish-build.sh",
     "generate": "plop",
     "atom": "plop atom",
     "molecule": "plop molecule",

scripts/publish-build.sh

@@ -64,4 +64,4 @@ search_replace_in_files() {
 # search_replace_in_files "../lib" "\.\./static" "static"
 # search_replace_in_files "../lib" "\.\." "\."
 # search_replace_in_files "../lib" "\(\.args" "\(\.\.\.args"
-npm run build
+npm run build:publish

scripts/publish.sh

@@ -1,5 +1,5 @@
 #!/bin/sh
 
-# source ./scripts/build.sh
+source ./scripts/publish-build.sh
 npm --no-git-tag-version version patch
 npm publish --access public

tsconfig.json

@@ -22,6 +22,6 @@
     ],
     "target": "es5",
   },
-  "include": ["lib", "src"],
-  "exclude": ["node_modules", "src/**/*.test.*", "src/**/*.spec.*", "src/stories", "scripts"]
+  "include": ["src"],
+  "exclude": ["build", "plop-templates", "node_modules", "src/**/*.test.*", "src/**/*.spec.*", "src/stories", "scripts"]
 }

vite-publish.config.ts

@@ -1,27 +1,22 @@
 import { defineConfig } from "vitest/config"
+import { extname, relative, resolve } from "path"
+import { fileURLToPath } from "node:url"
 import react from "@vitejs/plugin-react"
 import path from "path"
-import packageJson from "./package.json"
-import fs from "fs"
-
-const ROOT_PATH = "src/app/components"
-
-const postBuildCommands = () => {
-  ;["atoms", "molecules"].forEach((category) => {
-    fs.readdirSync(`./build/es/${category}`)
-  })
-}
+import svgr from "vite-plugin-svgr"
+import dts from "vite-plugin-dts"
+import { libInjectCss } from "vite-plugin-lib-inject-css"
+import { glob } from "glob"
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
+    svgr(),
     react(),
-    // {
-    //   name: "postbuild-commands", // the name of your custom plugin. Could be anything.
-    //   closeBundle: async () => {
-    //     await postBuildCommands() // run during closeBundle hook. https://rollupjs.org/guide/en/#closebundle
-    //   },
-    // },
+    libInjectCss(),
+    dts({
+      include: ["lib"],
+    }),
   ],
   server: {
     open: true,
@@ -33,29 +28,45 @@ export default defineConfig({
     },
   },
   build: {
+    copyPublicDir: false,
     lib: {
-      entry:
-        process.env.COMPONENT_CATEGORY === "index"
-          ? path.resolve(__dirname, `${ROOT_PATH}/index.ts`)
-          : genenrateComponentNames(),
+      entry: resolve(__dirname, "lib/index.ts"),
       name: "@armco/armory-react-components",
-      // @ts-ignore: formats type error
-      formats: [process.env.FORMAT],
+      formats: [
+        // "cjs",
+        "es",
+        // "umd"
+      ],
       fileName: (format, b) => {
-        return `${b}.js`
+        return `${format}/${b}.${format}.js`
       },
     },
+    outDir: "build",
+    // sourcemap: true,
     rollupOptions: {
-      external: [...Object.keys(packageJson.peerDependencies)],
+      treeshake: true,
+      external: [
+        "react",
+        "react/jsx-runtime",
+        "react-router-dom",
+        "react-dom",
+        "react-redux",
+      ],
+      input: Object.fromEntries(
+        glob.sync("lib/**/*.{ts,tsx}").map((file) => [
+          // The name of the entry point
+          // lib/nested/foo.ts becomes nested/foo
+          relative("lib", file.slice(0, file.length - extname(file).length)),
+          // The absolute path to the entry file
+          // lib/nested/foo.ts becomes /project/lib/nested/foo.ts
+          fileURLToPath(new URL(file, import.meta.url)),
+        ]),
+      ),
+      output: {
+        assetFileNames: "assets/[name][extname]",
+        entryFileNames: "[name].js",
+      },
     },
-    minify: false,
-    outDir: `build${process.env.FORMAT ? "/" + process.env.FORMAT : ""}${
-      process.env.COMPONENT_CATEGORY &&
-      process.env.COMPONENT_CATEGORY !== "index"
-        ? "/" + process.env.COMPONENT_CATEGORY
-        : ""
-    }`,
-    sourcemap: false,
   },
   test: {
     globals: true,
@@ -64,14 +75,3 @@ export default defineConfig({
     mockReset: true,
   },
 })
-
-function genenrateComponentNames() {
-  const CATEGORY_PATH = `${ROOT_PATH}/${process.env.COMPONENT_CATEGORY}`
-  const COMPONENTNAMES = fs
-    .readdirSync(`./${CATEGORY_PATH}`)
-    .map((file) => file)
-
-  return COMPONENTNAMES.map((name) =>
-    path.resolve(__dirname, `${CATEGORY_PATH}/${name}/${name}.tsx`),
-  )
-}

vite.config.ts

@@ -1,31 +1,11 @@
 import { defineConfig } from "vitest/config"
-import { extname, relative, resolve } from "path"
-import { fileURLToPath } from "node:url"
 import react from "@vitejs/plugin-react"
 import path from "path"
 import svgr from "vite-plugin-svgr"
-import dts from "vite-plugin-dts"
-import { libInjectCss } from "vite-plugin-lib-inject-css"
-import { glob } from "glob"
-import { visualizer } from "rollup-plugin-visualizer"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    svgr(),
-    react(),
-    // visualizer({
-    //   template: "treemap", // or sunburst
-    //   open: true,
-    //   gzipSize: true,
-    //   brotliSize: true,
-    //   filename: "analyse.html", // will be saved in project's root
-    // }),
-    libInjectCss(),
-    dts({
-      include: ["lib"],
-    }),
-  ],
+  plugins: [svgr(), react()],
   server: {
     open: true,
     port: 3000,
@@ -36,45 +16,8 @@ export default defineConfig({
     },
   },
   build: {
-    copyPublicDir: false,
-    lib: {
-      entry: resolve(__dirname, "lib/index.ts"),
-      name: "@armco/armory-react-components",
-      formats: [
-        // "cjs",
-        "es",
-        // "umd"
-      ],
-      fileName: (format, b) => {
-        return `${format}/${b}.${format}.js`
-      },
-    },
     outDir: "build",
     // sourcemap: true,
-    rollupOptions: {
-      treeshake: true,
-      external: [
-        "react",
-        "react/jsx-runtime",
-        "react-router-dom",
-        "react-dom",
-        "react-redux",
-      ],
-      input: Object.fromEntries(
-        glob.sync("lib/**/*.{ts,tsx}").map((file) => [
-          // The name of the entry point
-          // lib/nested/foo.ts becomes nested/foo
-          relative("lib", file.slice(0, file.length - extname(file).length)),
-          // The absolute path to the entry file
-          // lib/nested/foo.ts becomes /project/lib/nested/foo.ts
-          fileURLToPath(new URL(file, import.meta.url)),
-        ]),
-      ),
-      output: {
-        assetFileNames: "assets/[name][extname]",
-        entryFileNames: "[name].js",
-      },
-    },
   },
   test: {
     globals: true,