Fixed compile errors, added publish script

build-tools/build.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+
+# Get the directory of the current script
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+rm -rf build
+npx tsc
+vite build
+
+# Run Post processors: Update style imports in .js files, create component modules
+node "$SCRIPT_DIR/post-processor.js" build/cjs
+node "$SCRIPT_DIR/post-processor.js" build/es

build-tools/generate-module.js

@@ -0,0 +1,33 @@
+import { promises as fs } from "fs"
+import { dirname, resolve } from "path"
+import { fileURLToPath } from "url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const exclusions = ["Icon.js"]
+
+async function generateModule(fileName) {
+  if (!exclusions.includes(fileName)) {
+    const dir = fileName.slice(0, -3)
+    const name = `@armco/icon/${dir}`
+    const packageJsonContent = {
+      name,
+      main: `../cjs/${dir}.js`,
+      module: `../es/${dir}.js`,
+      types: `../types/${dir}.d.ts`,
+    }
+    const dirPath = resolve(__dirname, `../build/${dir}`)
+    try {
+      await fs.mkdir(dirPath, { recursive: true })
+      await fs.writeFile(
+        resolve(dirPath, "package.json"),
+        JSON.stringify(packageJsonContent, null, 2),
+      )
+    } catch (error) {
+      console.error(`Error processing directory ${dirPath}:`, error)
+    }
+  }
+}
+
+export default generateModule

build-tools/post-processor.js

@@ -0,0 +1,23 @@
+import { readdir } from "fs/promises"
+import generateModule from "./generate-module.js"
+
+async function postProcessor(dir) {
+  try {
+    const files = await readdir(dir)
+    await Promise.all(
+      files.map(async (file) => {
+        await generateModule(file, dir)
+      }),
+    )
+  } catch (error) {
+    console.error(`Error processing directory ${dir}:`, error)
+  }
+}
+
+const targetDir = process.argv[2]
+if (targetDir) {
+  postProcessor(targetDir)
+} else {
+  console.error("Please provide the build directory to run post processor on.")
+  process.exit(1)
+}

package.json

@@ -1,16 +1,20 @@
 {
   "name": "@armco/icon",
-  "private": true,
-  "version": "0.0.0",
+  "version": "0.0.5",
   "type": "module",
+  "main": "build/cjs/Icon.js",
+  "module": "build/es/Icon.js",
+  "types": "build/types/Icon.d.ts",
   "scripts": {
-    "build": "rm -rf build && tsc && vite build",
+    "build": "./build-tools/build.sh",
     "format": "prettier --write .",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "publish:sh": "./publish.sh",
+    "publish:local": "./publish-local.sh"
   },
   "dependencies": {
-    "@armco/types": "^0.0.9",
-    "@armco/utils": "^0.0.7",
+    "@armco/types": "^0.0.11",
+    "@armco/utils": "^0.0.17",
     "react": ">16.8.0",
     "react-dom": ">16.8.0"
   },
@@ -19,17 +23,12 @@
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^8.0.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "jsdom": "^21.1.0",
-    "prettier": "^2.7.1",
-    "prettier-config-nick": "^1.0.2",
     "sass": "^1.63.4",
     "typescript": "^5.0.2",
     "vite": "^4.0.0",
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "vite-plugin-dts": "^4.2.1",
+    "vite-plugin-externalize-deps": "^0.8.0",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^0.30.1"
   },
@@ -51,9 +50,6 @@
     "react-dom": ">16.8.0"
   },
   "prettier": "prettier-config-nick",
-  "main": "build/index.cjs.js",
-  "module": "build/index.es.js",
-  "types": "build/types/index.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ReStruct-Corporate-Advantage/icon.git"
@@ -64,6 +60,9 @@
     "building-blocks",
     "foundation"
   ],
+  "files": [
+    "build"
+  ],
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/ReStruct-Corporate-Advantage/icon/issues"

publish-local.sh

@@ -0,0 +1,16 @@
+#!/bin/sh
+
+semver=${1:-patch}
+
+set -e
+
+npm run build
+cp package.json build/
+sed -i '' -E 's/"build"/"*"/' build/package.json
+
+sed -i '' 's#"build/cjs/Icon.js"#"cjs/Icon.js"#' build/package.json
+sed -i '' 's#"build/es/Icon.js"#"es/Icon.js"#' build/package.json
+sed -i '' 's#"build/types/Icon.d.ts"#"types/Icon.d.ts"#' build/package.json
+
+cd build
+npm pack --pack-destination ~/__Projects__/Common

publish.sh

@@ -0,0 +1,16 @@
+#!/bin/sh
+
+semver=${1:-patch}
+
+set -e
+npm --no-git-tag-version version ${semver}
+npm run build
+cp package.json build/
+sed -i '' -E 's/"build"/"*"/' build/package.json
+
+sed -i '' 's#"build/cjs/Icon.js"#"cjs/Icon.js"#' build/package.json
+sed -i '' 's#"build/es/Icon.js"#"es/Icon.js"#' build/package.json
+sed -i '' 's#"build/types/Icon.d.ts"#"types/Icon.d.ts"#' build/package.json
+
+cd build
+npm publish --access public --loglevel verbose

src/Icon.tsx

@@ -1,4 +1,4 @@
-import React, { Component, ReactElement } from "react"
+import { cloneElement, Component, ReactElement } from "react"
 import {
   ArIconSourceTypes,
   ArValidImageMimeTypes,
@@ -7,7 +7,9 @@ import {
   IconProps,
   IconState,
 } from "@armco/types"
-import Network from "@armco/utils/network"
+import { get, getStatic, retry } from "@armco/utils/network"
+import { withTheme } from "@armco/utils/HOC"
+
 import {
   applyStyles,
   createElementFromSvg,
@@ -94,9 +96,9 @@ class Icon extends Component<IconProps, IconState> {
     ) {
       source = source as string
       const url =
-        type === ArIconSourceTypes.URL ? source : source.replace(/./g, "/")
+      type === ArIconSourceTypes.URL ? source : "/icon/" + source.replace(/\./g, "/")
       const fetcher = () =>
-        (type === ArIconSourceTypes.URL ? Network.get : Network.getStatic)(url)
+        (type === ArIconSourceTypes.URL ? get : getStatic)(url)
 
       if (iconRegistry[source]) {
         if (iconRegistry[source].icon) {
@@ -110,7 +112,7 @@ class Icon extends Component<IconProps, IconState> {
           )
         }
       } else {
-        const promise = Network.retry(fetcher).then((res) => {
+        const promise = retry(fetcher).then((res) => {
           this.handleIconResponse(res, source as string, type)
           return res
         })
@@ -140,7 +142,7 @@ class Icon extends Component<IconProps, IconState> {
           console.error("Unsupported icon type.")
           juice = placeholder as SVGSVGElement
       }
-      juice && this.setState({ juice, type })
+      juice && this.setState({ juice, type: type as ArIconSourceTypes })
     }
   }
 
@@ -163,8 +165,9 @@ class Icon extends Component<IconProps, IconState> {
       return juice as ReactElement
     } else {
       // Icon is likely an svg or png, for svg types, applyStyles attempts to apply provided svg styles
-      applyStyles(juice, this.props, this.state)
-      return React.cloneElement(
+      // This probably is handled in componentDidUpdate, should review. TODO:
+      // applyStyles(juice, this.props, this.state)
+      return cloneElement(
         createElementFromSvg(juice as SVGSVGElement) as ReactElement,
         {
           onMouseEnter: this.handleMouseEnter,

src/helper.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react"
+import { createElement as createReactElement, ReactElement } from "react"
 import {
   ArIconSourceTypes,
   ArThemes,
@@ -16,7 +16,7 @@ export const placeholder = parser
     ArValidImageMimeTypes.SVG,
   )
   .querySelector("svg") as SVGSVGElement
-const iconIdRegex = /^[a-zA-Z]{2,3}[./][a-zA-Z0-9]+$/
+const iconIdRegex = /^[a-zA-Z]{2,3}[.\/][a-zA-Z0-9]+$/
 
 export const inferIconType = (source: string | object): ArIconSourceTypes => {
   // At this point, icon is not IconSource, it's string or raw
@@ -65,7 +65,7 @@ export const createElementFromSvg = (juice: SVGSVGElement): React.ReactNode => {
       acc[attr.name] = attr.value
       return acc
     }, {} as Record<string, string>)
-    return React.createElement(node.tagName, props, ...children)
+    return createReactElement(node.tagName, props, ...children)
   }
   return createElement(juice)
 }

src/index.ts

@@ -1,2 +0,0 @@
-export { default as Icon } from "./Icon"
-export * from "./helper"

vite.config.ts

@@ -1,25 +1,30 @@
 import { resolve } from "path"
 import { defineConfig } from "vitest/config"
 import react from "@vitejs/plugin-react"
-import path from "path"
 import dts from "vite-plugin-dts"
 import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"
+import { externalizeDeps } from "vite-plugin-externalize-deps"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), dts({ outDir: "build/types" }), cssInjectedByJsPlugin()],
+  plugins: [
+    react(),
+    dts({ outDir: "build/types" }),
+    cssInjectedByJsPlugin({
+      jsAssetsFilterFunction: (chunk) => chunk.fileName.includes("Icon"),
+    }),
+    externalizeDeps(),
+  ],
   build: {
     outDir: "build",
     lib: {
       entry: [
-        resolve(__dirname, "src/index.ts"),
         resolve(__dirname, "src/helper.ts"),
         resolve(__dirname, "src/Icon.tsx"),
       ],
     },
     rollupOptions: {
       treeshake: true,
-      external: ["react", "react/jsx-runtime", "react-dom"],
       output: [
         {
           format: "es",