move vite configs to ./src + update actions versions

radio4000 · Apr 20, 2024 · 6b25930 · 6b25930
1 parent e9cc251
commit 6b25930
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 58 deletions.
diff --git a/.github/workflows/deploy-static-site.yml b/.github/workflows/deploy-static-site.yml
@@ -33,15 +33,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
       - run: npm install
       - run: npm run build
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v3
         with:
           # Upload entire repository
-          path: './dist'
+          path: dist-website
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v1
diff --git a/.github/workflows/publish-to-npm-registry.yml b/.github/workflows/publish-to-npm-registry.yml
@@ -12,12 +12,12 @@ jobs:
   publish:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
       - run: npm ci
       - run: npm run build
       - run: echo "Publishing to npm registry"
-      - uses: JS-DevTools/npm-publish@v2
+      - uses: JS-DevTools/npm-publish@v3
         with:
           token: ${{ secrets.NPM_TOKEN }}
           access: public
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,7 @@ node_modules
 dist
 dist-ssr
 dist-lib
+dist-website
 *.local
 
 # Editor directories and files

diff --git a/examples/index.html b/examples/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
@@ -8,9 +8,7 @@
 		<title>r4-components</title>
 		<meta name="description" content="all web-components for radio4000" />
 
-
 		<script type="module" src="/src/index.js"></script>
-		<script type="module" src="/src/components/r4-components.js"></script>
 	</head>
 
 	<body>

diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
@@ -8,7 +8,7 @@
 		<title>@radio4000/components</title>
 		<meta name="description" content="all web-components for radio4000" />
 
-		<link rel="stylesheet" href="/styles/index.css" />
+		<!-- <link rel="stylesheet" href="/src/index.css" /> -->
 		<script type="module" src="/src/index.js"></script>
 	</head>
 

diff --git a/package.json b/package.json
@@ -4,22 +4,21 @@
   "private": false,
   "version": "0.1.41",
   "type": "module",
-  "main": "dist/r4.js",
+  "main": "dist-lib/r4.js",
   "exports": {
-    ".": "./dist/r4.js"
+    ".": "./dist-lib/r4.js",
+    "styles": "./dist-lib/style.js"
   },
-  "files": [
-    "dist"
-  ],
+  "files": ["dist-lib"],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "format": "prettier src --write",
     "lint": "eslint src",
     "start": "npm run dev",
     "dev": "vite --port 4000",
-    "build": "npm run build-website; npm run build-library; mv dist-lib/r4.js dist/r4.js; mv dist-lib/style.css dist/r4.css; rm -r dist-lib",
-    "build-library": "vite build --config vite-lib.config.js",
-    "build-website": "vite build --config vite.config.js"
+    "build": "npm run build-website && npm run build-library",
+    "build-library": "vite build --config src/vite/lib.config.js",
+    "build-website": "vite build --config src/vite/site.config.js"
   },
   "dependencies": {
     "@radio4000/sdk": "^0.4.4",

diff --git a/src/components/index.js b/src/components/index.js
@@ -18,6 +18,7 @@ import R4ChannelCard from './r4-channel-card.js'
 import R4ChannelCreate from './r4-channel-create.js'
 import R4ChannelDelete from './r4-channel-delete.js'
 import R4ChannelUpdate from './r4-channel-update.js'
+import R4Components from './r4-components.js'
 import R4Dialog from './r4-dialog.js'
 import R4EmailUpdate from './r4-email-update.js'
 import R4Favicon from './r4-favicon.js'
@@ -65,6 +66,7 @@ customElements.define('r4-channel-create', R4ChannelCreate)
 customElements.define('r4-channel-delete', R4ChannelDelete)
 customElements.define('r4-channel-update', R4ChannelUpdate)
 customElements.define('r4-channel-search', R4ChannelSearch)
+customElements.define('r4-components', R4Components)
 customElements.define('r4-dialog', R4Dialog)
 customElements.define('r4-email-update', R4EmailUpdate)
 customElements.define('r4-favicon', R4Favicon)

diff --git a/src/components/r4-components.js b/src/components/r4-components.js
@@ -3,42 +3,44 @@
 	 It is intended as a way to introduce and navigate all r4 components..
  */
 
-import Components from './index.js'
-
 const ComponentRoot = 'R4'
 
-const camelToDash = str => {
-	return str.replace(/([A-Z])/g, val => `-${val.toLowerCase()}`)
+const camelToDash = (str) => {
+	return str.replace(/([A-Z])/g, (val) => `-${val.toLowerCase()}`)
 }
 
-const slugFromName = componentName => {
+const slugFromName = (componentName) => {
 	const camelName = componentName.split(ComponentRoot)[1]
 	const dashName = camelToDash(camelName)
 	return ComponentRoot.toLowerCase() + dashName
 }
 
-class R4Components extends HTMLElement {
-	get components() {
-		return Object.keys(Components).filter((exportClass) => {
-			return exportClass.startsWith(ComponentRoot)
-		}).map(componentName => {
-			const Component = Components[componentName]
-			const config = {
-				name: componentName,
-				HTMLElement: Component,
-				slug: slugFromName(componentName)
-			}
-			return config
-		})
+export default class R4Components extends HTMLElement {
+	buildComponents(Components) {
+		return Object.keys(Components)
+			.filter((exportClass) => {
+				return exportClass.startsWith(ComponentRoot)
+			})
+			.map((componentName) => {
+				const Component = Components[componentName]
+				const config = {
+					name: componentName,
+					HTMLElement: Component,
+					slug: slugFromName(componentName),
+				}
+				return config
+			})
 	}
-	connectedCallback() {
+	async connectedCallback() {
+		const {default: Components} = await import('./index.js')
+		this.components = this.buildComponents(Components)
 		if (this.components && this.components.length) {
 			this.render()
 		}
 	}
 	render() {
 		const $menu = document.createElement('menu')
-		this.components.forEach(component => {
+		this.components.forEach((component) => {
 			const $li = document.createElement('li')
 			$li.innerHTML = `
 				<a href="/examples/${component.slug}/">${component.name}</a>
@@ -49,9 +51,3 @@ class R4Components extends HTMLElement {
 		this.append($menu)
 	}
 }
-
-customElements.define('r4-components', R4Components)
-
-export default {
-	R4Components
-}
diff --git a/vite-lib.config.js → src/vite/lib.config.js b/vite-lib.config.js → src/vite/lib.config.js
@@ -1,21 +1,15 @@
 import {resolve} from 'path'
 import {defineConfig} from 'vite'
 
-// https://vitejs.dev/config/
 export default defineConfig({
 	build: {
-		// https://vitejs.dev/guide/build.html#library-mode
 		lib: {
 			entry: resolve('src/index.js'),
 			name: 'r4',
 			fileName: 'r4',
 			formats: ['es'],
 		},
 		rollupOptions: {
-			// input: {
-			// 	// r4: resolve(__dirname, 'src/index.js'),
-			// 	// what: resolve(__dirname, 'styles/index.css'),
-			// },
 			output: {
 				dir: 'dist-lib',
 			},

diff --git a/vite.config.js → src/vite/site.config.js b/vite.config.js → src/vite/site.config.js
@@ -2,7 +2,9 @@ import {resolve} from 'path'
 import {defineConfig} from 'vite'
 import recursive from 'recursive-readdir'
 
-/* treat the path '/examples/r4-app.html/' as SPA (serve the file, let js handle URL route) */
+const BASE_URL = process.env.VITE_BASE || '/'
+
+/* treat the path '/examples/r4-app.html/' as SPA (serve the file, let js handle route) */
 const vitePluginR4AppSPA = (options) => ({
 	name: 'vite-plugin-r4-app-spa',
 	configureServer(server) {
@@ -25,25 +27,26 @@ const generateExampleInputFiles = async () => {
 		.reduce((acc, entry) => {
 			const inputFilePath = entry.replace(__dirname + '/', '')
 			const inputName = inputFilePath.replace('.html', '').split('/').join('_')
-			acc[inputName] = `./${inputFilePath}`
+			acc[inputName] = inputFilePath
 			return acc
 		}, {})
 	return inputFiles
 }
 
 const examples = await generateExampleInputFiles()
 
-// https://vitejs.dev/config/
 export default defineConfig({
 	plugins: [vitePluginR4AppSPA()],
-	base: './',
+	base: BASE_URL,
 	build: {
-		// https://vitejs.dev/guide/build.html#library-mode
 		rollupOptions: {
 			input: {
 				main: resolve('index.html'),
 				...examples,
 			},
+			output: {
+				dir: 'dist-website',
+			},
 		},
 	},
 })