nextia 6.1.1 → 7.0.2

package/README.md

@@ -6,7 +6,7 @@ Create fast web applications
 
 ```sh
 npm install
-cd test-webapp
+cd template
 npm install
 node --run dev
 ```

package/biome.json

@@ -0,0 +1,21 @@
+{
+  "formatter": {
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+
+  "javascript": {
+    "formatter": {
+      "semicolons": "asNeeded",
+      "quoteStyle": "single",
+      "jsxQuoteStyle": "double",
+      "trailingCommas": "none"
+    }
+  },
+
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  }
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "nextia",
   "description": "Create fast web applications",
-  "version": "6.1.1",
+  "version": "7.0.2",
+  "license": "MIT",
+  "type": "module",
   "engines": {
     "node": ">22"
   },
-  "type": "module",
-  "license": "MIT",
   "author": {
     "name": "Sinuhe Maceda",
     "email": "sinuhe.dev@gmail.com",
@@ -20,9 +20,14 @@
   "keywords": [
     "react"
   ],
-  "main": "src/lib.js",
+  "bin": {
+    "nextia": "src/bin.js"
+  },
+  "exports": {
+    ".": "./src/lib/index.js"
+  },
   "scripts": {
-    "clean": "rm -fr node_modules package-lock.json pnpm-lock.yaml .coverage target",
+    "clean": "rm -fr my-app node_modules package-lock.json .coverage out",
     "format": "biome format",
     "lint": "biome lint src",
     "check": "biome check --reporter=summary src",
@@ -37,8 +42,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/coverage-v8": "^4.0.18",
-    "jsdom": "^29.0.0",
-    "vitest": "^4.0.18"
+    "@vitest/coverage-v8": "^4.1.2",
+    "jsdom": "^29.0.1",
+    "vitest": "^4.1.2"
   }
 }

package/src/bin.js

@@ -0,0 +1,239 @@
+#!/usr/bin/env node
+
+/**
+ * Copyright (c) 2025 Sinuhe Maceda https://sinuhe.dev
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * https://github.com/sinuhedev/create-nextia
+ */
+
+import {
+  access,
+  cp,
+  mkdir,
+  readFile,
+  rename,
+  writeFile
+} from 'node:fs/promises'
+import { dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import pkg from '../package.json' with { type: 'json' }
+
+function toPascalCase(str) {
+  return str
+    .toLowerCase()
+    .replace(/[^a-zA-Z0-9 ]/g, ' ') // replace special characters
+    .split(/\s+/) // split by spaces
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('')
+}
+
+async function createPage(name) {
+  const dirName = `./src/pages/${name}`
+  const pageName = `${toPascalCase(name)}Page`
+
+  try {
+    await mkdir(dirName)
+
+    // index.jsx
+    writeFile(
+      `${dirName}/index.jsx`,
+      `import { css, useFx } from 'nextia'
+import { useEffect } from 'react'
+import functions from './functions'
+import './style.css'
+
+export default function ${pageName} () {
+  const { state, fx } = useFx(functions)
+
+  return (
+    <section className={css('${pageName}', '')}>
+      ${pageName}
+    </section>
+  )
+}
+`
+    )
+
+    // style.sss
+    writeFile(
+      `${dirName}/style.css`,
+      `.${pageName} {
+}
+`
+    )
+
+    // function.js
+    writeFile(
+      `${dirName}/functions.js`,
+      `const initialState = {}
+
+export default { initialState }
+`
+    )
+    console.info(`✔ Page "${pageName}" created at ${dirName}`)
+  } catch (err) {
+    console.error(`Failed to create page: ${err.message}`)
+  }
+}
+
+async function createComponent(name) {
+  const dirName = `./src/components/${name}`
+
+  try {
+    await mkdir(dirName)
+    const componentName = toPascalCase(name)
+
+    // index.jsx
+    writeFile(
+      `${dirName}/index.jsx`,
+      `import { css } from 'nextia'
+import { useEffect } from 'react'
+import './style.css'
+
+export default function ${componentName} ({ className, style }) {
+  return (
+    <article className={css('${componentName}', className)} style={style}>
+      ${componentName}
+    </article>
+  )
+}
+`
+    )
+
+    // style.css
+    writeFile(
+      `${dirName}/style.css`,
+      `.${componentName}  {
+}
+`
+    )
+    console.info(`✔ Component "${name}" created at ${dirName}`)
+  } catch (err) {
+    console.error(`Failed to create component: ${err.message}`)
+  }
+}
+
+async function createContainer(name) {
+  const dirName = `./src/components/${name}`
+
+  try {
+    await mkdir(dirName)
+    const containerName = toPascalCase(name)
+
+    // index.jsx
+    writeFile(
+      `${dirName}/index.jsx`,
+      `import { useEffect } from 'react'
+import { css, useFx } from 'nextia'
+import functions from './functions'
+import './style.css'
+
+export default function ${containerName} ({ className, style }) {
+  const { state, fx } = useFx(functions)
+
+  return (
+    <article className={css('${containerName}', className, '')} style={style}>
+      ${containerName}
+    </article>
+  )
+}
+`
+    )
+
+    // style.css
+    writeFile(
+      `${dirName}/style.css`,
+      `.${containerName}  {
+}
+`
+    )
+
+    // function.js
+    writeFile(
+      `${dirName}/functions.js`,
+      `const initialState = {}
+
+export default { initialState }
+`
+    )
+    console.info(`✔ Container "${name}" created at ${dirName}`)
+  } catch (err) {
+    console.error(`Failed to create container: ${err.message}`)
+  }
+}
+
+async function createProject(name) {
+  const projectPath = `${process.cwd()}/${name}/`
+
+  try {
+    await access(projectPath)
+    console.error(`The ${name} already exists`)
+    return
+  } catch {
+    /* directory doesn't exist, proceed */
+  }
+
+  try {
+    const __dirname = dirname(fileURLToPath(import.meta.url))
+    const templatePath = `${__dirname}/../template`
+
+    const replaceToken = async (filename, token, value) => {
+      const content = await readFile(projectPath + filename, 'utf8')
+      await writeFile(
+        projectPath + filename,
+        content.replaceAll(token, value),
+        'utf8'
+      )
+    }
+
+    await cp(templatePath, projectPath, { recursive: true })
+
+    await Promise.all(
+      ['env.dev', 'env.prod', 'env.test', 'gitignore'].map((fileName) =>
+        rename(`${projectPath}_${fileName}`, `${projectPath}.${fileName}`)
+      )
+    )
+
+    await replaceToken('README.md', 'TEMPLATE', name)
+    await replaceToken('package.json', 'TEMPLATE', name)
+    await replaceToken('package.json', 'file:../', pkg.version)
+
+    console.info(`✔ Project "${name}" created successfully!`)
+  } catch (err) {
+    console.error(`Failed to create project: ${err.message}`)
+  }
+}
+
+async function main() {
+  const ARG1 = process.argv[2]
+  const ARG2 = process.argv[3]
+
+  switch (ARG1) {
+    case 'page':
+      if (ARG2) await createPage(ARG2)
+      else console.warn('node --run nextia page <page-name>')
+      break
+
+    case 'component':
+      if (ARG2) await createComponent(ARG2)
+      else console.warn('node --run nextia component <ComponentName>')
+      break
+
+    case 'container':
+      if (ARG2) await createContainer(ARG2)
+      else console.warn('node --run nextia container <ContainerName>')
+      break
+
+    default:
+      if (ARG1) await createProject(ARG1)
+      else console.info(`v${pkg.version}\nnextia <ProjectName>`)
+      break
+  }
+}
+
+main().catch((e) => {
+  console.error(e)
+})

package/src/{lib.js → lib/fx.js}

@@ -9,32 +9,13 @@
 
 import { createContext, use, useReducer } from 'react'
 
-const PagesContext = createContext()
-const isLogger = import.meta.env.DEV
+const LOGGER = import.meta.env.DEV && import.meta.env.PUBLIC_LOGGER !== 'false'
+const PagesFx = createContext()
 
 /**
  * util
  */
 
-function css(...classNames) {
-  return classNames
-    .reduce((accumulator, currentValue) => {
-      if (typeof currentValue === 'string') {
-        accumulator.push(currentValue.trim())
-      } else if (
-        !Array.isArray(currentValue) &&
-        typeof currentValue === 'object'
-      ) {
-        for (const e in currentValue) {
-          if (currentValue[e]) accumulator.push(e.trim())
-        }
-      }
-      return accumulator
-    }, [])
-    .filter((e) => e)
-    .join(' ')
-}
-
 function values(state, payload, value) {
   const paths = payload.split('.')
 
@@ -166,10 +147,10 @@ const reducerLogger = (state, action) => {
  */
 
 function useFx(functions = { initialState: {} }) {
-  const pageContext = use(PagesContext)
+  const pagesFx = use(PagesFx)
   const { initialState } = functions
   const [state, dispatch] = useReducer(
-    isLogger ? reducerLogger : reducer,
+    LOGGER ? reducerLogger : reducer,
     initialState
   )
 
@@ -177,7 +158,12 @@ function useFx(functions = { initialState: {} }) {
   const commonActions = ['set', 'show', 'hide', 'change', 'reset'].reduce(
     (acc, e) => {
       acc[e] = (payload) =>
-        dispatch({ type: e, payload, initialState, isContext: !pageContext })
+        dispatch({
+          type: e,
+          payload,
+          initialState,
+          isContext: !pagesFx?.context
+        })
       return acc
     },
     {}
@@ -190,10 +176,8 @@ function useFx(functions = { initialState: {} }) {
         const actionsProps = {
           ...commonActions,
           state,
-          payload
-        }
-        if (pageContext) {
-          actionsProps.context = pageContext
+          payload,
+          context: pagesFx?.context
         }
 
         return functions[e](Object.freeze(actionsProps))
@@ -206,13 +190,14 @@ function useFx(functions = { initialState: {} }) {
   const props = {
     initialState,
     state,
-    fx: { ...commonActions, ...actions }
-  }
-  if (pageContext) {
-    props.context = pageContext
+    fx: { ...commonActions, ...actions },
+    //
+    context: pagesFx?.context,
+    icons: pagesFx?.icons,
+    i18n: pagesFx?.i18n
   }
 
   return Object.freeze(props)
 }
 
-export { css, PagesContext, useFx }
+export { PagesFx, useFx }

package/src/lib/index.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2025 Sinuhe Maceda https://sinuhe.dev
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * https://github.com/sinuhedev/nextia
+ */
+
+import { PagesFx, useFx } from './fx.js'
+import { I18n, Icon, Link, Svg } from './ui.js'
+import {
+  css,
+  env,
+  startViewTransition,
+  useQueryString,
+  useResize
+} from './utils.js'
+
+export {
+  css,
+  env,
+  I18n,
+  Icon,
+  Link,
+  PagesFx,
+  Svg,
+  startViewTransition,
+  useFx,
+  useQueryString,
+  useResize
+}

package/src/lib/ui.js

@@ -0,0 +1,112 @@
+import { createElement, useEffect, useRef } from 'react'
+import { useFx } from './fx'
+import { css } from './utils'
+
+function Link({ children, href, value = {}, ...props }) {
+  href ??= window.location.hash.split('?')[0]
+  value = Object.keys(value).length
+    ? `?${new URLSearchParams(value).toString()}`
+    : ''
+
+  return createElement('a', { href: href + value, ...props }, children)
+}
+
+function I18n({ value, args = [] }) {
+  const { context, i18n } = useFx()
+
+  if (i18n) {
+    try {
+      let text = value.split('.').reduce((ac, el) => ac[el], i18n)
+      text = text[i18n.locales.indexOf(context.state.i18n.currentLocale)]
+
+      if (args) {
+        text = text.replace(
+          /([{}])\\1|[{](.*?)(?:!(.+?))?[}]/g,
+          (match, _literal, number) => args[number] || match
+        )
+      }
+
+      return text
+    } catch {
+      console.error(`Error in [il8n] => ${value}`)
+      return value
+    }
+  }
+}
+
+function Icon({
+  id,
+  className,
+  animate = false,
+  style,
+  width = '48',
+  height,
+  viewBox = '0 0 48 48',
+  fill = 'none',
+  color = 'currentColor',
+  stroke = 'currentColor',
+  strokeWidth = '2',
+  strokeLinecap = 'round',
+  strokeLinejoin = 'round',
+  ...props
+}) {
+  const { icons } = useFx()
+  const ref = useRef()
+
+  useEffect(() => {
+    if (icons) {
+      const svg = new DOMParser()
+        .parseFromString(icons, 'image/svg+xml')
+        .documentElement.getElementById(id)
+
+      if (svg) {
+        ref.current.innerHTML = svg.innerHTML
+      }
+    }
+  }, [id, icons])
+
+  return createElement('svg', {
+    xmlns: 'http://www.w3.org/2000/svg',
+    ref,
+    id,
+    className: css({ 'nextia-animate-icon': animate }, className),
+    style,
+    width,
+    height: height ?? width,
+    viewBox,
+    fill,
+    color,
+    stroke,
+    strokeWidth,
+    strokeLinecap,
+    strokeLinejoin,
+    ...props
+  })
+}
+
+function Svg({ ref, src, width, height, ...props }) {
+  ref ??= useRef()
+
+  useEffect(() => {
+    const svg = new DOMParser().parseFromString(
+      src,
+      'image/svg+xml'
+    ).documentElement
+
+    for (const { name, value } of svg.attributes) {
+      if (name !== 'width' && name !== 'height')
+        ref.current.setAttribute(name, value)
+    }
+
+    ref.current.replaceChildren(...svg.children)
+  }, [src, ref])
+
+  return createElement('svg', {
+    ref,
+    width,
+    height: height ?? width,
+    ...props
+  })
+}
+
+export { I18n, Icon, Link, Svg }

package/src/lib/utils.js

@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) 2025 Sinuhe Maceda https://sinuhe.dev
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * https://github.com/sinuhedev/nextia
+ */
+
+import { useCallback, useEffect, useState } from 'react'
+import { flushSync } from 'react-dom'
+
+/**
+ * env
+ */
+
+const env = import.meta.env
+
+/**
+ * View Transition
+ */
+
+async function startViewTransition(fun = () => {}, ref, animation = 'fade') {
+  if (!document.startViewTransition || env.PUBLIC_VIEW_TRANSITION === 'false')
+    return fun()
+
+  ref.style.viewTransitionName = animation
+  await document.startViewTransition(() => flushSync(fun)).finished
+  ref.style.viewTransitionName = ''
+}
+
+/**
+ * hooks
+ */
+
+function useQueryString() {
+  const getQueryString = useCallback(
+    () => ({
+      hash: window.location.hash.split('?')[0],
+      queryString: Object.fromEntries(
+        new URLSearchParams(window.location.hash.split('?')[1])
+      )
+    }),
+    []
+  )
+
+  const [queryString, setQueryString] = useState(getQueryString)
+
+  useEffect(() => {
+    const handlePopState = () => setQueryString(getQueryString())
+
+    window.addEventListener('popstate', handlePopState)
+    return () => {
+      window.removeEventListener('popstate', handlePopState)
+    }
+  }, [getQueryString])
+
+  return queryString
+}
+
+function useResize() {
+  const getResize = useCallback(
+    () => ({
+      width: window.innerWidth,
+      height: window.innerHeight
+    }),
+    []
+  )
+
+  const [resize, setResize] = useState(getResize)
+
+  useEffect(() => {
+    const handleResize = () => setResize(getResize())
+
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [getResize])
+
+  return resize
+}
+
+/**
+ * util
+ */
+
+function css(...classNames) {
+  return classNames
+    .reduce((accumulator, currentValue) => {
+      if (typeof currentValue === 'string') {
+        accumulator.push(currentValue.trim())
+      } else if (
+        !Array.isArray(currentValue) &&
+        typeof currentValue === 'object'
+      ) {
+        for (const e in currentValue) {
+          if (currentValue[e]) accumulator.push(e.trim())
+        }
+      }
+      return accumulator
+    }, [])
+    .filter((e) => e)
+    .join(' ')
+}
+
+export { css, env, startViewTransition, useQueryString, useResize }

package/template/README.md

@@ -0,0 +1,29 @@
+# TEMPLATE
+
+# To start
+Open http://localhost:3000 to view it in the browser.
+
+```sh
+npm install
+#
+node --run dev
+node --run test
+node --run build <ENV>
+node --run preview
+```
+
+# env
+```.env
+.env          # loaded in all cases
+.env.[ENV]    # only loaded in specified ENV [ dev, test, prod ]
+```
+
+ * .env.dev
+ * .env.prod
+ * .env.test
+ 
+```env
+PUBLIC_TITLE=TITLE
+PUBLIC_LOGGER=true
+PUBLIC_VIEW_TRANSITION=true
+```

package/template/_env.dev

@@ -0,0 +1,4 @@
+PUBLIC_TITLE=dev
+PUBLIC_LOGGER=true
+PUBLIC_VIEW_TRANSITION=true
+PUBLIC_API=https://65fd14fb9fc4425c653119c5.mockapi.io/api/v1

package/template/_env.prod

@@ -0,0 +1 @@
+PUBLIC_TITLE=prod

package/template/_env.test

@@ -0,0 +1 @@
+PUBLIC_TITLE=test