nitro-web 0.0.1 → 0.0.2

package/components/partials/layout/layout2.jsx

@@ -17,7 +17,7 @@ export function Layout2({ Logo }) {
           <Outlet />
         </div>
 
-        <div class="wrapper-2 w-full px-5 pb-4 flex items-center w-full text-sm text-[#1F1F1F]">
+        <div class="wrapper-2 w-full px-5 pb-4 flex items-center text-sm text-[#1F1F1F]">
           <ul class="flex-1 flex gap-4 list-style-none">
             <li><Link class="underline1" to="/">Home</Link></li>
             <li><Link class="underline1" to="/signin">About</Link></li>

package/components/partials/styleguide.jsx

@@ -1,4 +1,3 @@
-/*eslint-disable*/
 import { getCountryOptions, getCurrencyOptions, ucFirst } from '../../util.js'
 import { CheckIcon } from '@heroicons/react/20/solid'
 import { Input } from './form/input.jsx'
@@ -14,14 +13,13 @@ export function Styleguide({ config }) {
     address: '',
     country: 'us',
     currency: 'nzd', // can be commented too
-    // amount: 100,
-    // brandColor: '#F3CA5F',
+    amount: 100,
+    brandColor: '#F3CA5F',
     firstName: 'Tony',
     date: Date.now(),
     errors: [
       { title: 'address', detail: 'Address is required' },
       { title: 'currency', detail: 'Currency is required' },
-      // { title: 'brandColor', detail: 'Color is required' },
     ],
   })
 
@@ -75,7 +73,8 @@ export function Styleguide({ config }) {
         </div>
         <div>
           <label for="input1">Label</label>
-          <Checkbox name="input1" type="radio" text="Radio 1" subtext="some additional text here 1." id="input1-1" class="!mb-0" defaultChecked />
+          <Checkbox name="input1" type="radio" text="Radio 1" subtext="some additional text here 1." id="input1-1" class="!mb-0" 
+            defaultChecked />
           <Checkbox name="input1" type="radio" text="Radio 2" subtext="some additional text here 2." id="input1-2" class="!mt-0" />
         </div>
         <div>
@@ -118,8 +117,8 @@ export function Styleguide({ config }) {
         <div><Button color="primary-md">*-md (default)</Button></div>
         <div><Button color="primary-lg">*-lg button</Button></div>
         <div><Button IconLeft={<CheckIcon class="size-5 -my-5 -mx-0.5" />}>IconLeft=Element</Button></div>
-        <div><Button IconRight="v">IconRight="v"</Button></div>
-        <div><Button IconRight2="v" className="w-[200px]">IconRight2="v"</Button></div>
+        <div><Button IconRight="v">IconRight=&quot;v&quot;</Button></div>
+        <div><Button IconRight2="v" className="w-[200px]">IconRight2=&quot;v&quot;</Button></div>
         <div><Button color="primary" isLoading>primary isLoading</Button></div>
       </div>
 

package/components/settings/settings-account.jsx

@@ -130,7 +130,7 @@ export function RemoveModal ({ show, setShow }) {
   )
 }
 
-import { css } from '@emotion/react'
+import { css } from 'twin.macro'
 const style = (_theme) => css`
   /* input[type='file'] {
     padding: 8px 18px;

package/components/settings/settings-business.jsx

@@ -36,7 +36,7 @@ export function SettingsBusiness({ config }) {
   }
 
   return (
-    <div css={style}>
+    <div>
       <Topbar 
         title={<>Settings</>} 
         submenu={
@@ -116,6 +116,3 @@ export function SettingsBusiness({ config }) {
   )
 }
 
-import { css } from '@emotion/react'
-const style = (_theme) => css`
-`

package/components/settings/settings-team--member.jsx

@@ -1,5 +1,5 @@
 // todo: finish tailwind conversion
-import { css } from '@emotion/react'
+import { css } from 'twin.macro'
 import { Button } from '../partials/element/button.jsx'
 import { Modal } from '../partials/element/modal.jsx'
 import { FormError } from '../partials/form/form-error.jsx'

package/package.json

@@ -2,7 +2,7 @@
   "name": "nitro-web",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",
   "repository": "github:boycce/nitro-web",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "client.js",
   "type": "module",
   "keywords": [
@@ -14,41 +14,28 @@
     "tailwind",
     "webpack"
   ],
-  "imports": {
-    "#nitro-web/*": { "default": "./*" }
-  },
-  "babelMacros": {
-    "twin": {
-      "preset": "emotion",
-      "config": "./_example/tailwind.config.js"
-    }
+  "workspaces": [
+    "_example"
+  ],
+  "exports": {
+    ".": "./client/index.js",
+    "./server": "./server/index.js",
+    "./util": "./util.js",
+    "./.eslintrc.json": "./.eslintrc.json",
+    "./webpack.config.js": "./webpack.config.js"
   },
   "scripts": {
-    "build": "NODE_ENV=production webpack --target=web",
-    "dev": "clear  && npm run dev:server:lint --silent & npm run dev:server --silent & npm run dev:client --silent",
-    "dev:client": "NITRO=true webpack serve --progress --config ./_example/webpack.config.js",
-    "dev:server": "NITRO=true nodemon ./_example/server -q -w ./_example/server/ -w ./_example/components/ -w ./server/ -w ./components/ -e js",
-    "dev:server:lint": "eslint ./_example/components ./_example/server ./components/ ./server/",
+    "dev": "npm run dev -w example",
     "major": "standard-version --release-as major && npm publish",
     "minor": "standard-version --release-as minor && npm publish",
-    "patch": "standard-version --release-as patch && npm publish",
-    "start": "node ./_example/server",
-    "stripe": "stripe listen --forward-to localhost:3001/api/stripe/webhook"
+    "patch": "standard-version --release-as patch && npm publish"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@headlessui/react": "^2.2.0",
-    "@heroicons/react": "^2.2.0",
-    "@hokify/axios": "^0.19.1",
-    "@stripe/react-stripe-js": "^1.9.0",
-    "@stripe/stripe-js": "^1.34.0",
     "@uiw/color-convert": "^2.3.0",
     "@uiw/react-color-hue": "^2.3.0",
     "@uiw/react-color-saturation": "^2.3.0",
-    "axios-retry": "^3.3.1",
     "bcrypt": "^5.0.0",
     "body-parser": "^1.19.0",
-    "chart.js": "^4.4.3",
     "compression": "^1.7.4",
     "connect-mongo": "^5.1.0",
     "date-fns": "^3.6.0",
@@ -58,98 +45,51 @@
     "express-fileupload": "^1.1.6",
     "express-session": "^1.17.0",
     "inline-css": "^4.0.2",
-    "monastery": "~3.5.1",
     "nanoid": "^4.0.0",
     "nodemailer": "^6.5.0",
     "nodemailer-mailgun-transport": "^2.0.2",
     "nunjucks": "^3.2.2",
     "passport": "^0.4.1",
-    "passport-jwt": "^4.0.0",
     "passport-local": "^1.0.0",
-    "pdf-to-img": "^4.1.0",
-    "pdfmake": "0.2.7",
-    "react": "^18.3.1",
-    "react-chartjs-2": "^5.2.0",
     "react-currency-input-field": "^3.8.0",
     "react-day-picker": "^8.10.1",
-    "react-dom": "^18.3.1",
     "react-number-format": "^5.4.0",
     "react-router-dom": "6.24.1",
     "react-select": "^5.9.0",
     "react-tracked": "^1.3.0",
-    "sort-route-addresses-nodeps": "0.0.4",
-    "stripe": "^9.16.0"
+    "sort-route-addresses-nodeps": "0.0.4"
+  },
+  "peerDependencies": {
+    "@headlessui/react": "^2.2.0",
+    "@heroicons/react": "^2.2.0",
+    "@hokify/axios": "^0.19.1",
+    "@stripe/stripe-js": "^1.34.0",
+    "axios-retry": "^3.3.1",
+    "monastery": "^3.5.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "stripe": "^9.16.0",
+    "twin.macro": "^3.4.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.8.0",
-    "@babel/preset-react": "^7.9.4",
-    "@babel/preset-typescript": "^7.24.7",
-    "@emotion/babel-plugin": "^11.11.0",
     "@emotion/eslint-plugin": "^11.11.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-    "@svgr/webpack": "^8.1.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.4",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "@typescript-eslint/eslint-plugin": "^8.18.1",
     "@typescript-eslint/parser": "^8.18.1",
-    "autoprefixer": "^9.8.8",
     "babel-eslint": "^10.0.3",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-macros": "^3.1.0",
-    "babel-plugin-react-html-attrs": "^2.1.0",
-    "clean-terminal-webpack-plugin": "https://github.com/boycce/clean-terminal-webpack-plugin.git",
-    "color": "^4.2.3",
-    "copy-webpack-plugin": "^12.0.2",
-    "core-js": "^3.12.1",
-    "css-loader": "^3.6.0",
-    "csv-loader": "^3.0.5",
     "eslint": "^8.57.1",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^28.9.0",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^4.0.0",
     "eslint-webpack-plugin": "^2.7.0",
-    "html-loader": "^1.3.2",
-    "html-webpack-plugin": "^5.6.0",
-    "jest": "^29.7.0",
-    "migrate-mongo": "^10.0.0",
-    "mini-css-extract-plugin": "^2.9.0",
-    "nodemon": "^2.0.1",
-    "postcss": "^8.4.49",
-    "postcss-for": "^2.1.1",
-    "postcss-import": "^16.1.0",
-    "postcss-import-resolver": "^2.0.0",
-    "postcss-loader": "^8.1.1",
-    "postcss-nested": "^7.0.2",
-    "react-refresh": "^0.14.2",
-    "standard-version": "^9.3.2",
-    "string-replace-loader": "^3.1.0",
-    "super-nunjucks-loader": "^2.0.0",
-    "tailwind-merge": "^2.6.0",
-    "tailwindcss": "^3.4.17",
-    "twin.macro": "^3.4.1",
-    "typescript": "^5.5.2",
-    "webpack": "^5.92.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.6.0",
-    "webpack-node-externals": "^1.7.2"
+    "standard-version": "^9.3.2"
   },
   "engines": {
     "node": "^18"
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 10"
-  ],
-  "nodemonConfig": {
-    "events": {
-      "restart": "echo \"\\033[0;35mExpress restarting..\\033[0m\""
-    }
-  },
   "standard-version": {
     "releaseCommitMessageFormat": "{{currentTag}}",
     "sign": true,
@@ -158,15 +98,6 @@
       "tag": true
     }
   },
-  "prettier": {
-    "printWidth": 140,
-    "quoteProps": "consistent",
-    "semi": false,
-    "singleQuote": true,
-    "tabWidth": 2,
-    "trailingComma": "es5",
-    "useTabs": false
-  },
   "jest": {
     "transform": {}
   },

package/readme.md

@@ -1,22 +1,43 @@
 # Nitro
 
-[![NPM](https://img.shields.io/npm/v/nitro-web.svg)](https://www.npmjs.com/package/nitro-web) [![Build Status](https://travis-ci.com/boycce/nitro-web.svg?branch=master)](https://app.travis-ci.com/github/boycce/nitro-web)
+[![NPM](https://img.shields.io/npm/v/nitro-web.svg)](https://www.npmjs.com/package/nitro-web)
 
 Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀
 
-### Install
-
 ```bash
 npm i nitro-web
 ```
 
-### Setup
+### Install
 
-1. Copy the `./_example` folder to your project
-2. Copy over `./package.json`
-4. In `./package.json`, search and replace `/_example` with `./`
-5. In `./package.json`, replace `{ "default": "./*" }` with `{ "default": "nitro-web/*" }`
-6. `npm i`
+1. Copy `./_example` into your project
+2. In package.json, replace `"nitro-web": "file:.."` with `"nitro-web": "^0.0.1"`
+3. In package.json, replace `"../.eslintrc.json"` with `"./node_modules/nitro-web/.eslintrc.json"`
+4. In tsconfig.json, remove
+```json
+    "paths": {
+      "nitro-web": [
+        "../client/index.js",
+      ],
+    },
+```
+5. Run `npm i`
+
+### Usage
+
+On the client, you can import components and page-components as you would normally. See the example folder for further info.
+
+```javascript
+import { SigninPage, Toggle, util } from 'nitro-web'
+```
+
+On the server, you can import the express router, default models, and controllers. See the example folder for further info.
+
+```javascript
+import { setupRouter, util } from 'nitro-web/server.js'
+const server = await setupRouter(config)
+server.listen(3001, '0.0.0.0')
+```
 
 ### Running in development
 
@@ -41,3 +62,12 @@ npm run start
 - React `^18.3`
 - Tailwind `^3.4`
 - Webpack `^5.92`
+
+### Common packages
+
+- `pdf-to-img`
+- `pdfmake`
+- `react-chartjs-2`
+- `jest: ^29.7.0`
+- `migrate-mongo: ^10.0.0`
+- `eslint-plugin-jest: ^28.9.0`

package/server/email/index.js

@@ -5,12 +5,13 @@ import nunjucks from 'nunjucks'
 import inlineCss from 'inline-css'
 import { dirname, join } from 'path'
 import { fileURLToPath } from 'url'
+import path from 'path'
+import { getDirectories } from '../../util.js'
 
 let templates = {}
 let nodemailerMailgun = undefined
 const _dirname = dirname(fileURLToPath(import.meta.url)) + '/'
 
-
 export async function sendEmail({ template, to, bcc, data={}, from, replyTo, recipientVariables, subject, test, skipCssInline, config }) {
   /**
    * Email recipient a predefined template with data and/or recipientVariables
@@ -72,7 +73,7 @@ export async function sendEmail({ template, to, bcc, data={}, from, replyTo, rec
   let settings = {
     bcc: bcc,
     from: from,
-    isDev: config.clientUrl.match(/:/),
+    isDev: config.clientUrl.match(/:/), // possibly use config.env here
     recipientVariables: recipientVariables,
     replyTo: replyTo,
     skipCssInline: skipCssInline,
@@ -81,34 +82,35 @@ export async function sendEmail({ template, to, bcc, data={}, from, replyTo, rec
     test: config.emailTestMode || test,
     to: to,
     url: config.clientUrl,
+    emailTemplateDir: getDirectories(path, config.pwd).emailTemplateDir,
   }
 
   // Grab html and send
-  let html = template.match('<') ? template : await getTemplate(settings, config)
+  let html = template.match('<') ? template : await getTemplate(settings)
   if (!html) throw new Error('Sendmail: No template returned from getTemplate(..)')
   return await sendWithMailgun(settings, html) // note, mailgun errors are resolved
 }
 
-async function getTemplate(settings, config) {
+async function getTemplate(settings) {
   try {
     var templateName = settings.template
     if (!templates[templateName] || settings.isDev) {
-      nunjucks.configure({ noCache: config.env === 'development' })
+      nunjucks.configure({ noCache: settings.isDev })
       // Setup the nunjucks environment
-      let env = new nunjucks.Environment([
-        new nunjucks.FileSystemLoader(`${config.emailTemplateDir}`), // user templates take precedence
+      let nunjucksEnv = new nunjucks.Environment([
+        new nunjucks.FileSystemLoader(`${settings.emailTemplateDir}`), // user templates take precedence
         new nunjucks.FileSystemLoader(`${_dirname}`), // then fallback to nitro default templates
       ])
       // Get the template
-      let template = env.getTemplate(templateName + '.html', true)
+      let template = nunjucksEnv.getTemplate(templateName + '.html', true)
       // Render the template
       let html = template.render({})
       if (settings.skipCssInline && settings.test) {
         templates[templateName] = html
       } else {
         try { 
-          // First try to inline the CSS from the user templates directory (config.emailTemplateDir)
-          templates[templateName] = await inlineCssForPath(html, config.emailTemplateDir)
+          // First try to inline the CSS from the user templates directory
+          templates[templateName] = await inlineCssForPath(html, settings.emailTemplateDir)
         } catch (e) {
           // If the CSS is not found, use default nitro CSS file
           if (templateName == 'reset-password' || templateName == 'welcome') {

package/server/index.js

@@ -0,0 +1,23 @@
+export * from '../util.js'
+export * as util from '../util.js'
+
+// Export models
+import userModel from './models/user.js'
+import companyModel from './models/company.js'
+async function setupDefaultModels(db) {
+  // Load default nitro models, if they don't exist already
+  if (!db.models.user) await db.model('user', userModel)
+  if (!db.models.company) await db.model('company', companyModel)
+}
+export { userModel, companyModel, setupDefaultModels }
+
+// Export router
+export { setupRouter } from './router.js'
+
+// Export email utility
+export { sendEmail } from './email/index.js'
+
+// Export api default controllers
+export { default as auth } from '../components/auth/auth.api.js'
+export { default as settings } from '../components/settings/settings.api.js'
+export { default as stripe } from '../components/billing/stripe.api.js'

package/server/router.js

@@ -14,19 +14,16 @@ import * as util from '../util.js'
 const _dirname = dirname(fileURLToPath(import.meta.url)) + '/'
 
 export async function setupRouter (config) {
-  const { componentsDir, distDir, emailTemplateDir, env, middleware, version } = config
+  const { env, middleware, version } = config
+  const { componentsDir, distDir, emailTemplateDir } = util.getDirectories(path, config.pwd)
   const expressApp = express()
   const server = http.createServer(expressApp)
   const apiRoutes = {}
   const controllers = {}
   const allMiddleware = { ...defaultMiddleware, ...(middleware || {}) }
 
-  if (!componentsDir) {
-    throw new Error('setupRouter: `config.componentsDir` missing')
-  } else if (!env) {
+  if (!env) {
     throw new Error('setupRouter: `config.env` missing')
-  } else if (!emailTemplateDir) {
-    throw new Error('setupRouter: `config.emailTemplateDir` missing')
   }
 
   // Extend request/response with our custom error responses
@@ -95,8 +92,7 @@ export async function setupRouter (config) {
     expressApp.get('/email/partials/email.css', (req, res) => {
       // first check if there is a custom email.css in the emailTemplateDir
       // if not, return the default nitro email.css
-      console.log(_dirname)
-      if (fs.existsSync(emailTemplateDir + '/partials/email.css')) res.sendFile(emailTemplateDir + '/partials/email.css')
+      if (fs.existsSync(emailTemplateDir + 'partials/email.css')) res.sendFile(emailTemplateDir + 'partials/email.css')
       else res.sendFile(_dirname + 'email/partials/email.css')
     })
     expressApp.get('/email/:name', async (req, res) => {

package/util.js

@@ -490,6 +490,19 @@ export function getCurrencyPrefixWidth (prefix, paddingRight=0) {
   return width
 }
 
+export function getDirectories (path, pwd) {
+  const _pwd = pwd || process.env.PWD
+  return {
+    clientDir: path.join(_pwd, process.env.clientDir || 'client', '/'),
+    componentsDir: path.join(_pwd, process.env.componentsDir || 'components', '/'),
+    distDir: path.join(_pwd, process.env.distDir || ((process.env.clientDir || 'client') + '/dist'), '/'),
+    emailTemplateDir: path.join(_pwd, process.env.emailTemplateDir || 'server/email', '/'),
+    fontsDir: path.join(_pwd, (process.env.clientDir || 'client'), 'fonts', '/'),
+    imgsDir: path.join(_pwd, (process.env.clientDir || 'client'), 'imgs', '/'),
+    tmpDir: path.join(_pwd, process.env.tmpDir || 'tmp', '/'),
+  }
+}
+
 export function getLink (obj, query) {
   /**
    * @param {object} obj - new query object

package/webpack.config.js

@@ -7,7 +7,7 @@ import HtmlWebpackPlugin from 'html-webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import webpackNodeExternals from 'webpack-node-externals'
 import path from 'path'
-import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
+// import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
 import tailwindcss from 'tailwindcss'
 import webpack from 'webpack'
 import ESLintPlugin from 'eslint-webpack-plugin'
@@ -15,31 +15,27 @@ import postcssImport from 'postcss-import'
 import postcssNested from 'postcss-nested'
 import postcssFor from 'postcss-for'
 import { createRequire } from 'module'
-import postcssImportResolver from 'postcss-import-resolver'
-const _require = createRequire(import.meta.url)
+import { getDirectories } from './util.js'
 
-export function getWebpackConfig(config) {
-  // Configurables
-  const { clientDir, componentsDir, distDir, isNitro, nitroDir } = config
-  const imgsDir = path.join(clientDir, 'imgs/')
-  const fontsDir = path.join(clientDir, 'fonts/')
-  const build = process.env.NODE_ENV == 'production'
+const _require = createRequire(import.meta.url)
+const pick = (object, list) => list.reduce((o, e) => ((o[e] = object[e]), o), {})
+const isBuild = process.env.NODE_ENV == 'production'
 
-  const pick = (object, list) => list.reduce((o, e) => ((o[e] = object[e]), o), {})
+axiosRetry(axios, {
+  retries: 10,
+  retryDelay: () => 150,
+  retryCondition: (e) =>  e.code == 'ECONNREFUSED',
+})
 
-  axiosRetry(axios, {
-    retries: 10,
-    retryDelay: () => 150,
-    retryCondition: (e) =>  e.code == 'ECONNREFUSED',
-  })
+// process.traceDeprecation = true
+export const getConfig = (config) => {
+  const { clientDir, componentsDir, distDir, imgsDir, fontsDir } = getDirectories(path, config.pwd)
 
-  // process.traceDeprecation = true
-  // eslint-disable-next-line
   return (env, argv) => [{
-    devtool: build ? false : 'source-map',
+    devtool: isBuild ? false : 'source-map',
     entry: clientDir + 'index.ts',
-    // entry: build ? './client/index.tsx' : ['webpack-plugin-serve/client', './client/index.tsx'], // check this
-    mode: build ? 'production' : 'development',
+    // entry: isBuild ? './client/index.tsx' : ['webpack-plugin-serve/client', './client/index.tsx'], // check this
+    mode: isBuild ? 'production' : 'development',
     // target=node ignores node_modules
     externals: argv.target?.[0] == 'node' ? [webpackNodeExternals()] : [],
     // target=node  ignores builtin modules
@@ -94,17 +90,18 @@ export function getWebpackConfig(config) {
             { loader: 'postcss-loader', options: {
               postcssOptions: {
                 plugins: [
-                  !isNitro ? postcssImport : postcssImport({ 
-                    resolve: postcssImportResolver({
-                      alias: { 
-                        'nitro-web/client/css/components.css': path.resolve(nitroDir, 'client/css/components.css'),
-                        'nitro-web/client/css/fonts.css': path.resolve(nitroDir, 'client/css/fonts.css'),
-                      },
-                    }),
-                  }),
+                  postcssImport,
+                  // postcssImport({ 
+                  //   resolve: postcssImportResolver({
+                  //     alias: { 
+                  //       'nitro-web/client/css/components.css': path.resolve(nitroDir, 'client/css/components.css'),
+                  //       'nitro-web/client/css/fonts.css': path.resolve(nitroDir, 'client/css/fonts.css'),
+                  //     },
+                  //   }),
+                  // }),
                   postcssNested,
                   postcssFor,
-                  tailwindcss({ config: `./${isNitro ? '_example/' : ''}tailwind.config.js` }), 
+                  tailwindcss({ config: path.resolve(config.pwd, 'tailwind.config.js') }), 
                   autoprefixer,
                 ],
               },
@@ -127,19 +124,25 @@ export function getWebpackConfig(config) {
               options: {
                 presets: [
                   ['@babel/preset-env', { debug: false }],
-                  ['@babel/preset-react', { runtime: 'automatic', importSource: '@emotion/react' }],
                   ['@babel/preset-typescript', { allowNamespaces: true }],
+                  ['@babel/preset-react', { runtime: 'automatic', importSource: '@emotion/react', development: !isBuild }],
                 ],
                 plugins: [
                   'react-html-attrs',
                   '@babel/plugin-syntax-dynamic-import',
                   '@babel/plugin-transform-runtime',
                   '@emotion/babel-plugin',
-                  // Below allows us to reference tailwindcss theme variables in emotion
+                  // Below allows us to reference tailwindcss theme variables in emotion blocks
+                  // https://github.com/ben-rogerson/twin.macro/blob/master/docs/options.md
                   // https://medium.com/fredwong-it/emotion-tailwind-twin-macro-7fdc5f2ae5f9
-                  // https://github.com/ben-rogerson/twin.examples/tree/master/webpack-emotion-typescript
-                  'babel-plugin-macros',
-                  !build && _require.resolve('react-refresh/babel'),
+                  // https://github.com/ben-rogerson/twin.examples/tree/master/react-emotion-typescript#complete-the-typescript-setup
+                  ['babel-plugin-macros', {
+                    'twin': {
+                      preset: 'emotion',
+                      config: path.resolve(config.pwd, 'tailwind.config.js'),
+                    },
+                  }],
+                  // 'react-refresh/babel', // !isBuild && _require.resolve('react-refresh/babel'),
                 ].filter(Boolean),
               },
             },
@@ -231,7 +234,7 @@ export function getWebpackConfig(config) {
       // We are outputing assets into a handy subdir to allow for easier asset cache control. We can't
       // simply use `path` because webpack-dev-server won't work when writeFiles=false (in memory).
       // Because of this we manually need to prefix all output filenames with `assets/`.
-      filename: `assets/bundle.[name]${build ? '.[contenthash]' : ''}.js`,
+      filename: `assets/bundle.[name]${isBuild ? '.[contenthash]' : ''}.js`,
       path: distDir,
       publicPath: '/',
     },
@@ -249,7 +252,7 @@ export function getWebpackConfig(config) {
           },
         },
       },
-      minimize: build,
+      minimize: isBuild,
     },
     plugins: [
       // new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)(),
@@ -270,10 +273,10 @@ export function getWebpackConfig(config) {
         extensions: ['js', 'mjs', 'jsx'],
         exclude: ['node_modules'],
       }),
-      new MiniCssExtractPlugin({ filename: `assets/bundle.[name]${build ? '.[contenthash]' : ''}.css` }),
+      new MiniCssExtractPlugin({ filename: `assets/bundle.[name]${isBuild ? '.[contenthash]' : ''}.css` }),
       new HtmlWebpackPlugin({ template: clientDir + 'index.html', filename: distDir + 'index.html' }),
       new CleanTerminalPlugin({ skipFirstRun: true }),
-      !build && new ReactRefreshWebpackPlugin({ overlay: false }),
+      // !isBuild && new ReactRefreshWebpackPlugin({ overlay: false }),
     ].filter(Boolean),
     resolve: {
       extensions: ['.js', '.jsx', '.ts', '.tsx'],
@@ -281,8 +284,6 @@ export function getWebpackConfig(config) {
       alias: {
         // required for auto-importing page components into nitro app.js router
         'componentsDir': componentsDir,
-        // needed only for only the example app. There are also css aliases above in postcss plugins
-        'nitro-web': isNitro ? path.resolve(nitroDir, 'client.js') : undefined,
       },
     },
     stats: {
@@ -298,5 +299,4 @@ export function getWebpackConfig(config) {
       ignored: new RegExp(`(${componentsDir}.*\\.api\\.js$|node_modules/(?!cherry))`),
     },
   }]
-
-}
+}