Merge pull request #997 from mbrevda/buildDevSite

feat(dev): build dev preview site on build

.github/workflows/buildDeploy.yml

@@ -4,7 +4,8 @@ on: push
 
 env:
   CI: true
-  NODE_VER: 19
+  NODE_VER: 20
+  NETLIFY_SITE_ID: 89194942-bd48-4c23-a181-7e489c17eabc
 
 jobs:
   lint:
@@ -75,6 +76,31 @@ jobs:
       - name: test built libs
         run: npm run test:dist
 
+      - name: Setup env vars
+        run: |
+          printf -v SHORT_COMMIT_MESSAGE '%q ' `git log --oneline -n 1 HEAD --format=%B`
+          echo "GIT_SHORT_COMMIT_MESSAGE=$SHORT_COMMIT_MESSAGE" | tee -a $GITHUB_ENV
+          echo "GIT_SHORT_REVISION=$(echo ${GITHUB_SHA} | cut -c1-7)" | tee -a $GITHUB_ENV
+
+      - name: Deploy visual tests to Netlify
+        uses: nwtgck/actions-netlify@v2
+        id: deploy-to-netlify
+        with:
+          publish-dir: dist/dev
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          deploy-message: '[${{ github.ref_name }}@${{ env.GIT_SHORT_REVISION }}] ${{ env.GIT_SHORT_COMMIT_MESSAGE }}'
+          enable-pull-request-comment: false
+          enable-commit-comment: false
+          enable-commit-status: false
+          # Use custom alias for non master branch Deploy Previews only
+          alias: ${{ github.ref_name != 'master' && env.RUN_NAME || '' }}
+          github-deployment-environment: '[${{ github.ref_name }}] visual tests'
+          fails-without-credentials: true
+          production-deploy: ${{ github.ref_name == 'master' }}
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ env.NETLIFY_SITE_ID }}
+
   deploy:
     runs-on: ubuntu-latest
     needs: [lint, test]

build.js

@@ -1,7 +1,10 @@
-import {context, build} from 'esbuild'
 import {rm} from 'node:fs/promises'
+import url from 'node:url'
+import {context, build} from 'esbuild'
+import open from 'open'
 
-await rm('./dist', {recursive: true, force: true})
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
+const distOutdir = './dist/dev'
 
 const buildOpts = {
   entryPoints: ['./src/index.tsx', './src/Img.tsx', './src/useImage.tsx'],
@@ -16,16 +19,44 @@ const buildOpts = {
   jsx: 'automatic',
 }
 
-// build esm version
-await build(buildOpts)
+const devBuildOpts = {
+  entryPoints: ['./dev/app.tsx', './dev/index.html', './dev/sw.js'],
+  bundle: true,
+  splitting: true,
+  outdir: distOutdir,
+  format: 'esm',
+  sourcemap: true,
+  minify: process.env.NODE_ENV !== 'development',
+  jsxDev: true,
+  jsx: 'automatic',
+  loader: {'.html': 'copy'},
+}
+
+await rm('./dist', {recursive: true, force: true})
 
-// build cjs version
-await build({
-  ...buildOpts,
-  format: 'cjs',
-  outdir: './dist/cjs',
-  splitting: false,
-})
+if (process.env.NODE_ENV !== 'development') {
+  // build esm version
+  await Promise.all([
+    build(buildOpts),
+
+    // build cjs version
+    build({
+      ...buildOpts,
+      format: 'cjs',
+      outdir: './dist/cjs',
+      splitting: false,
+    }),
+
+    // build dev site
+    build(devBuildOpts),
+  ])
+} else {
+  const ctx = await context(devBuildOpts)
+  await ctx.watch()
+  let {port} = await ctx.serve({servedir: distOutdir})
+  open(`http://localhost:${port}`)
+  await ctx.dispose()
+}
 
 process.on('unhandledRejection', console.error)
 process.on('uncaughtException', console.error)

dev/index.js

@@ -1,11 +1,19 @@
 import url from 'node:url'
+import {parseArgs} from 'node:util'
 import {context} from 'esbuild'
 import {rm} from 'node:fs/promises'
 import open from 'open'
 
 // const app = express()
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
-const outdir = __dirname + '../dist'
+const outdir = __dirname + '../dist/dev'
+const {
+  values: {build},
+} = parseArgs({
+  options: {
+    build: {type: 'boolean', default: false},
+  },
+})
 
 await rm(outdir, {recursive: true, force: true})
 
@@ -27,10 +35,14 @@ const buildOpts = {
 }
 
 const ctx = await context(buildOpts)
-await ctx.watch()
-let {port} = await ctx.serve({servedir: outdir})
-open(`http://localhost:${port}`)
-
+if (!build) {
+  await ctx.watch()
+  let {port} = await ctx.serve({servedir: outdir})
+  open(`http://localhost:${port}`)
+} else {
+  await ctx.rebuild()
+  await ctx.dispose()
+}
 process.on('unhandledRejection', console.error)
 process.on('uncaughtException', console.error)
 process.on('exit', () => ctx && ctx.dispose())

package.json

@@ -3,10 +3,10 @@
   "version": "4.1.0",
   "description": "React Image is an <img> tag replacement for react, featuring preloader and multiple image fallback support",
   "scripts": {
-    "build": "npm run build:types && node build.js",
+    "build": "node build.js && npm run build:types && mv dist/src/*.d.ts dist",
     "build:types": "tsc -p tsconfig.json --emitDeclarationOnly",
     "codecov": "codecov",
-    "dev": "node --watch dev/index.js",
+    "dev": "NODE_ENV=development node --watch build.js",
     "pretty": "prettier \"**/*.{?(cj|mj|t|j)s?(on|on5|x),y?(a)ml,graphql,md,css}\"  --write",
     "isNewerThanPublished": "semver `npm -s view $npm_package_name dist-tags.${TAG:-latest}` --range \"<$npm_package_version\" > /dev/null && echo true || echo false",
     "test": "jest",
@@ -46,7 +46,7 @@
   ],
   "module": "dist/esm/index.js",
   "main": "dist/cjs/index.js",
-  "types": "react-image.d.ts",
+  "types": "dist/index.d.ts",
   "type": "module",
   "author": "[email protected]",
   "license": "MIT",

src/index.tsx

@@ -1,3 +1,3 @@
 import Img, {ImgProps} from './Img'
 import useImage, {useImageProps} from './useImage'
-export {Img, useImage, ImgProps, useImageProps}
+export {Img, useImage, type ImgProps, type useImageProps}

tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "declaration": true, // emit declerations
-    "declarationDir": ".", // to this dir
-    "outDir": "./jsSrc", // but all other code to this dir
+    "declarationDir": "./dist", // to this dir
+    "outDir": "./dist", // but all other code to this dir
     "sourceMap": true, // allow sourcemap support
     "strictNullChecks": true, // enable strict null checks as a best practice
     // "module": "es6", // specify module code generation