feat: compile files before release (#15)

* feat: compile files before release * Remove kill-port as it is not needed and does fail sometimes on windows sd * Remove postinstall hook, as it is not needed * Enhance docs with additional import to remove
dnbexperience · Oct 11, 2023 · 941d3d7 · 941d3d7
1 parent 10b36c1
commit 941d3d7
Show file tree

Hide file tree

Showing 18 changed files with 238 additions and 105 deletions.
diff --git a/README.md b/README.md
@@ -22,6 +22,7 @@ It looks for `@dnb/eufemia` – nearest located from where this plugin is used (
 ```diff
 - import '@dnb/eufemia/style/core'
 - import '@dnb/eufemia/style/themes/ui'
+- import '@dnb/eufemia/style/themes/sbanken'
 ```
 
 2. This plugin also wraps your application with the [`<Theme>`](https://eufemia.dnb.no/uilib/usage/customisation/theming/theme/) provider. If you want to wrap your apps by yourself, you can disable this by using this option: `wrapWithThemeProvider: false`. You could make your own wrapper like so:

diff --git a/package.json b/package.json
@@ -10,14 +10,13 @@
     "watch": "yarn workspace gatsby-plugin-eufemia-theme-handler watch",
     "watch:all": "yarn watch & yarn workspace sb-theme-example watch & yarn workspace ui-theme-example watch & yarn serve",
     "start": "yarn watch & yarn workspace sb-theme-example start & yarn workspace ui-theme-example start",
-    "build": "yarn workspace gatsby-plugin-eufemia-theme-handler build && yarn workspace ui-theme-example build && yarn workspace ui-theme-example serve & yarn workspace sb-theme-example build && kill-port 8002",
+    "build": "yarn workspace gatsby-plugin-eufemia-theme-handler build && yarn workspace ui-theme-example build && yarn workspace ui-theme-example serve & yarn workspace sb-theme-example build",
     "serve": "yarn workspace sb-theme-example serve & yarn workspace ui-theme-example serve",
     "clean": "yarn workspace sb-theme-example clean & yarn workspace ui-theme-example clean",
     "release": "yarn workspace gatsby-plugin-eufemia-theme-handler release"
   },
   "devDependencies": {
-    "@dnb/eufemia": "10.7.0",
-    "kill-port": "2.0.1"
+    "@dnb/eufemia": "10.7.0"
   },
   "engines": {
     "node": "18.13.0",

diff --git a/packages/gatsby-plugin-eufemia-theme-handler/.gitignore b/packages/gatsby-plugin-eufemia-theme-handler/.gitignore
@@ -1 +1,3 @@
-load-eufemia-styles.js
+*.js
+*.d.ts
+!babel.config.js
diff --git a/packages/gatsby-plugin-eufemia-theme-handler/babel.config.js b/packages/gatsby-plugin-eufemia-theme-handler/babel.config.js
@@ -0,0 +1,25 @@
+const presets = [
+  '@babel/preset-react',
+  [
+    '@babel/preset-typescript',
+    {
+      isTSX: true,
+      allExtensions: true,
+    },
+  ],
+  [
+    '@babel/preset-env',
+    {
+      modules: process.env.GATSBY_FILES ? false : 'auto',
+      targets: { node: 'current' },
+    },
+  ],
+]
+
+const gatsbyFiles = ['**/gatsby-browser.ts', '**/gatsby-ssr.ts']
+
+module.exports = {
+  ignore: process.env.GATSBY_FILES ? ['**/*.d.ts'] : gatsbyFiles,
+  only: process.env.GATSBY_FILES ? gatsbyFiles : undefined,
+  presets,
+}
diff --git a/packages/gatsby-plugin-eufemia-theme-handler/package.json b/packages/gatsby-plugin-eufemia-theme-handler/package.json
@@ -30,8 +30,8 @@
     "./collectThemes.js": "./collectThemes.js",
     "./themeHandler.js": "./themeHandler.js",
     "./themeHandler.d.ts": "./themeHandler.d.ts",
-    "./inlineScriptDev.mjs": "./inlineScriptDev.mjs",
-    "./inlineScriptProd.mjs": "./inlineScriptProd.mjs",
+    "./inlineScriptDev.js": "./inlineScriptDev.js",
+    "./inlineScriptProd.js": "./inlineScriptProd.js",
     "./gatsby-node.js": "./gatsby-node.js",
     "./gatsby-browser.js": "./gatsby-browser.js",
     "./gatsby-ssr.js": "./gatsby-ssr.js",
@@ -41,8 +41,11 @@
     "release": "yarn copy-readme && yarn build && semantic-release",
     "release:dry": "semantic-release --dry-run",
     "copy-readme": "cp ../../README.md ./README.md",
-    "build": "echo not implemented",
-    "watch": "echo not implemented",
+    "build": "yarn build:cmd && GATSBY_FILES=true yarn build:cmd && yarn build:types",
+    "build:cmd": "yarn babel src --extensions .js,.ts,.tsx,.mjs --out-dir .",
+    "build:types": "tsc --project tsconfig.json",
+    "clean": "rm -rf themeHandler.js themeHandler.d.js load-eufemia-styles.js inlineScriptProd.js inlineScriptDev.js index.js gatsby-ssr.js gatsby-node.js gatsby-browser.js EventEmitter.js collectThemes.js",
+    "watch": "yarn build --watch",
     "test:types": "tsc --noEmit"
   },
   "dependencies": {
@@ -53,6 +56,11 @@
     "terser-loader": "2.0.3"
   },
   "devDependencies": {
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.0",
     "semantic-release": "21.1.1",
     "typescript": "5.2.2"
   },

diff --git a/...gin-eufemia-theme-handler/EventEmitter.js → ...eufemia-theme-handler/src/EventEmitter.ts b/...gin-eufemia-theme-handler/EventEmitter.js → ...eufemia-theme-handler/src/EventEmitter.ts
@@ -9,14 +9,41 @@
  * But when this package is used inside projects, we do not have /src – a workarround could be to export /src in the main package.
  */
 
+declare global {
+  interface Window {
+    __EEE__?: EventEmitterEEE
+  }
+}
+
+export type EventEmitterId = string
+export type EventEmitterData = Record<string, unknown>
+export type EventEmitterListener = (data: EventEmitterData) => void
+export type EventEmitterEEE = Record<
+  EventEmitterId,
+  EventEmitterScopeObject
+>
+export type EventEmitterScope =
+  | ({
+      __EEE__?: EventEmitterEEE
+    } & Window)
+  | EventEmitter
+export type EventEmitterScopeInstances = Array<EventEmitter>
+export type EventEmitterScopeObject = {
+  count: number
+  instances: EventEmitterScopeInstances
+  data: EventEmitterData
+}
+
 class EventEmitter {
-  static createInstance(id) {
+  static createInstance(id: EventEmitterId) {
     return new EventEmitter(id)
   }
 
-  static __EEE__
+  static __EEE__?: Record<EventEmitterId, EventEmitterScopeObject>
+  id: EventEmitterId
+  listeners: Array<EventEmitterListener>
 
-  constructor(id) {
+  constructor(id: EventEmitterId) {
     scope.__EEE__ = scope.__EEE__ || {}
     if (!scope.__EEE__[id]) {
       scope.__EEE__[id] = {
@@ -33,7 +60,7 @@ class EventEmitter {
 
     return this
   }
-  update = (data) => {
+  update = (data: EventEmitterData) => {
     this.set(data)
     scope.__EEE__[this.id].instances.forEach((instance) => {
       instance.listeners.forEach((fn) => {
@@ -43,7 +70,7 @@ class EventEmitter {
       })
     })
   }
-  set = (data) => {
+  set = (data: EventEmitterData) => {
     scope.__EEE__[this.id].data = {
       ...scope.__EEE__[this.id].data,
       ...data,
@@ -52,13 +79,13 @@ class EventEmitter {
   get = () => {
     return scope.__EEE__[this.id].data
   }
-  listen(fn) {
+  listen(fn: EventEmitterListener) {
     if (!this.listeners.includes(fn)) {
       this.listeners.push(fn)
     }
     return this
   }
-  unlisten(fn) {
+  unlisten(fn?: EventEmitterListener | undefined) {
     for (let i = 0, l = this.listeners.length; i < l; i++) {
       if (!fn || (fn && fn === this.listeners[i])) {
         this.listeners[i] = null

diff --git a/...in-eufemia-theme-handler/collectThemes.js → ...ufemia-theme-handler/src/collectThemes.ts b/...in-eufemia-theme-handler/collectThemes.js → ...ufemia-theme-handler/src/collectThemes.ts
@@ -1,8 +1,8 @@
-const path = require('path')
-const fs = require('fs')
-const globby = require('globby')
-const micromatch = require('micromatch')
-const { slash } = require('gatsby-core-utils')
+import path from 'path'
+import fs from 'fs'
+import globby from 'globby'
+import micromatch from 'micromatch'
+import { slash } from 'gatsby-core-utils'
 
 /**
  * We want to run this in sync,
@@ -13,7 +13,7 @@ const { slash } = require('gatsby-core-utils')
  * @property {object} reporter Gatsby Reporter
  * @property {object} pluginOptions Gatsby pluginOptions
  */
-function createThemesImport({
+export function createThemesImport({
   reporter,
   programDirectory,
   pluginOptions,
@@ -63,24 +63,28 @@ function createThemesImport({
     )
   }
 
-  const sortedImportFiles = importFiles
-    .map((file) => {
-      const themeName = (file.match(new RegExp('/theme-([^/]*)/')) ||
-        [])?.[1]
-
-      return { file, themeName }
-    })
-    .filter(({ themeName }) => {
-      return limitThemes.length === 0 || limitThemes.includes(themeName)
-    })
-    .sort((a, b) => {
-      return (
-        includeFiles.findIndex((glob) =>
-          micromatch.isMatch(a.file, glob)
-        ) -
-        includeFiles.findIndex((glob) => micromatch.isMatch(b.file, glob))
-      )
-    })
+  type File = string
+  const sortedImportFiles: Array<{ file: File; themeName?: string }> =
+    importFiles
+      .map((file) => {
+        const themeName = (file.match(new RegExp('/theme-([^/]*)/')) ||
+          [])?.[1]
+
+        return { file, themeName }
+      })
+      .filter(({ themeName }) => {
+        return limitThemes.length === 0 || limitThemes.includes(themeName)
+      })
+      .sort((a, b) => {
+        return (
+          includeFiles.findIndex((glob) =>
+            micromatch.isMatch(a.file, glob)
+          ) -
+          includeFiles.findIndex((glob) =>
+            micromatch.isMatch(b.file, glob)
+          )
+        )
+      })
 
   if (pluginOptions.coreStyleName) {
     const coreFile = importFiles.find((file) =>
@@ -129,5 +133,3 @@ function createThemesImport({
 
   showReports()
 }
-
-exports.createThemesImport = createThemesImport
diff --git a/...n-eufemia-theme-handler/gatsby-browser.js → ...femia-theme-handler/src/gatsby-browser.ts b/...n-eufemia-theme-handler/gatsby-browser.js → ...femia-theme-handler/src/gatsby-browser.ts
diff --git a/...ugin-eufemia-theme-handler/gatsby-node.js → ...-eufemia-theme-handler/src/gatsby-node.ts b/...ugin-eufemia-theme-handler/gatsby-node.js → ...-eufemia-theme-handler/src/gatsby-node.ts
@@ -3,10 +3,10 @@
  *
  */
 
-const path = require('path')
-const micromatch = require('micromatch')
-const { slash } = require('gatsby-core-utils')
-const { createThemesImport } = require('./collectThemes')
+import path from 'path'
+import micromatch from 'micromatch'
+import { slash } from 'gatsby-core-utils'
+import { createThemesImport } from './collectThemes'
 
 global.themeNames = []
 

diff --git a/...lugin-eufemia-theme-handler/gatsby-ssr.js → ...n-eufemia-theme-handler/src/gatsby-ssr.ts b/...lugin-eufemia-theme-handler/gatsby-ssr.js → ...n-eufemia-theme-handler/src/gatsby-ssr.ts
diff --git a/...sby-plugin-eufemia-theme-handler/index.js → ...plugin-eufemia-theme-handler/src/index.ts b/...sby-plugin-eufemia-theme-handler/index.js → ...plugin-eufemia-theme-handler/src/index.ts
diff --git a/...eufemia-theme-handler/inlineScriptDev.mjs → ...mia-theme-handler/src/inlineScriptDev.mjs b/...eufemia-theme-handler/inlineScriptDev.mjs → ...mia-theme-handler/src/inlineScriptDev.mjs
diff --git a/...ufemia-theme-handler/inlineScriptProd.mjs → ...ia-theme-handler/src/inlineScriptProd.mjs b/...ufemia-theme-handler/inlineScriptProd.mjs → ...ia-theme-handler/src/inlineScriptProd.mjs
diff --git a/...gin-eufemia-theme-handler/raw-loader.d.ts → ...eufemia-theme-handler/src/raw-loader.d.ts b/...gin-eufemia-theme-handler/raw-loader.d.ts → ...eufemia-theme-handler/src/raw-loader.d.ts
diff --git a/...gin-eufemia-theme-handler/themeHandler.js → ...ufemia-theme-handler/src/themeHandler.tsx b/...gin-eufemia-theme-handler/themeHandler.js → ...ufemia-theme-handler/src/themeHandler.tsx
@@ -4,46 +4,61 @@ import inlineScriptProd from '!raw-loader!terser-loader!./inlineScriptProd'
 import inlineScriptDev from '!raw-loader!terser-loader!./inlineScriptDev'
 import EventEmitter from './EventEmitter.js'
 
+import type { ThemeNames, ThemeProps } from '@dnb/eufemia/shared/Theme'
+
+type PropMapping = string
+
+export type ThemesItem = {
+  file?: string
+  hide?: boolean
+  isDev?: boolean
+} & ThemeProps & { name?: ThemeNames }
+export type Themes = Array<ThemesItem>
+
 const defaultTheme = globalThis.EUFEMIA_THEME_defaultTheme || 'ui'
 const availableThemes = globalThis.EUFEMIA_THEME_themes || []
 const storageId = globalThis.EUFEMIA_THEME_storageId || 'eufemia-theme'
 const availableThemesArray = Object.keys(availableThemes)
 
-export function getThemes() {
+export function getThemes(): Themes {
   return availableThemes
 }
 
-export function isValidTheme(themeName) {
+export function isValidTheme(themeName: ThemeNames) {
   return availableThemesArray.includes(themeName)
 }
 
-export function useThemeHandler() {
+export function useThemeHandler(): ThemesItem {
   const [theme, setTheme] = React.useState(getTheme)
 
   React.useEffect(() => {
     const emitter = EventEmitter.createInstance('themeHandler')
     emitter.listen((theme) => {
-      setTheme(theme)
+      setTheme(theme as ThemesItem)
     })
   }, [])
 
   return theme
 }
 
-export function getTheme() {
+export function getTheme(): ThemesItem {
   if (typeof window === 'undefined') {
     return { name: defaultTheme }
   }
   try {
     const data = window.localStorage.getItem(storageId)
-    const theme = JSON.parse(data?.startsWith('{') ? data : '{}')
+    const theme = JSON.parse(
+      data?.startsWith('{') ? data : '{}'
+    ) as ThemesItem
 
     const regex = /.*eufemia-theme=([^&]*).*/
     const query = window.location.search
     const fromQuery =
       (regex.test(query) && query?.replace(regex, '$1')) || null
 
-    const themeName = fromQuery || theme?.name || defaultTheme
+    const themeName = (fromQuery ||
+      theme?.name ||
+      defaultTheme) as ThemeNames
 
     if (!isValidTheme(themeName)) {
       console.error('Not valid themeName:', themeName)
@@ -57,8 +72,11 @@ export function getTheme() {
   }
 }
 
-export function setTheme(themeProps, callback) {
-  const theme = { ...getTheme(), ...themeProps }
+export function setTheme(
+  themeProps: { name?: string; propMapping?: PropMapping },
+  callback
+) {
+  const theme = { ...getTheme(), ...themeProps } as ThemesItem
 
   if (!isValidTheme(theme?.name)) {
     console.error('Not valid themeName:', theme?.name)

diff --git a/packages/gatsby-plugin-eufemia-theme-handler/themeHandler.d.ts b/packages/gatsby-plugin-eufemia-theme-handler/themeHandler.d.ts
diff --git a/packages/gatsby-plugin-eufemia-theme-handler/tsconfig.json b/packages/gatsby-plugin-eufemia-theme-handler/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "declaration": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "emitDeclarationOnly": true,
+    "declarationDir": ".",
+    "rootDir": "src",
+    "baseUrl": "."
+  },
+  "include": ["src/*.ts", "src/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}