nextia 6.1.1 → 7.0.0

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,7 +1,7 @@
 {
   "name": "nextia",
   "description": "Create fast web applications",
-  "version": "6.1.1",
+  "version": "7.0.0",
   "engines": {
     "node": ">22"
   },
@@ -20,16 +20,25 @@
   "keywords": [
     "react"
   ],
+  "bin": {
+    "nextia": "src/bin.js"
+  },
   "main": "src/lib.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",
     "test": "vitest run",
     "test:name": "vitest run --testNamePattern",
     "test:silent": "vitest run --silent",
-    "test:coverage": "vitest run --silent --coverage"
+    "test:coverage": "vitest run --silent --coverage",
+    "test:version": "./src/bin.js",
+    "test:my-app": "rm -fr my-app && src/bin.js my-app",
+    "test:my-app:exists": "src/bin.js my-app",
+    "test:my-page": "cd my-app && ../src/bin.js page my-page",
+    "test:my-component": "cd my-app && ../src/bin.js component MyComponent",
+    "test:my-container": "cd my-app && ../src/bin.js container MyContainer"
   },
   "peerDependencies": {
     "react": "^19.2.3",
@@ -38,7 +47,7 @@
   "devDependencies": {
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/coverage-v8": "^4.0.18",
-    "jsdom": "^29.0.0",
+    "jsdom": "^29.0.1",
     "vitest": "^4.0.18"
   }
 }

package/src/bin.js

@@ -0,0 +1,240 @@
+#!/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 cp(`${__dirname}/../biome.json`, `${projectPath}/biome.json`)
+
+    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}\nnpm create nextia <ProjectName>`)
+      break
+  }
+}
+
+main().catch((e) => {
+  console.error(e)
+})

package/src/lib.js

@@ -9,8 +9,8 @@
 
 import { createContext, use, useReducer } from 'react'
 
+const LOGGER = import.meta.env.DEV && import.meta.env.PUBLIC_LOGGER !== 'false'
 const PagesContext = createContext()
-const isLogger = import.meta.env.DEV
 
 /**
  * util
@@ -169,7 +169,7 @@ function useFx(functions = { initialState: {} }) {
   const pageContext = use(PagesContext)
   const { initialState } = functions
   const [state, dispatch] = useReducer(
-    isLogger ? reducerLogger : reducer,
+    LOGGER ? reducerLogger : reducer,
     initialState
   )
 

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

package/template/_gitignore

@@ -0,0 +1,10 @@
+node_modules
+
+out
+deploy
+deploy-variables
+
+.coverage
+.env
+.env.*
+

package/template/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "TEMPLATE",
+  "description": "description",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite --mode dev",
+    "clean": "rm -fr node_modules package-lock.json .coverage out",
+    "build": "vite build --mode",
+    "preview": "vite preview",
+    "format": "biome format",
+    "lint": "biome lint",
+    "check": "biome check --reporter=summary",
+    "page": "nextia page",
+    "component": "nextia component",
+    "container": "nextia container",
+    "test": "vitest",
+    "test:name": "vitest run --testNamePattern",
+    "test:silent": "vitest run --silent",
+    "test:coverage": "vitest run --silent --coverage"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "^4.0.18",
+    "jsdom": "^29.0.1",
+    "vite": "^8.0.1",
+    "vitest": "^4.0.18"
+  },
+  "dependencies": {
+    "nextia": "file:../",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  }
+}

package/template/public/error.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<title>Error</title>
+	<link rel="shortcut icon" href="logo.svg" />
+</head>
+
+<body>
+	Error ...
+</body>
+
+</html>

package/template/public/logo.svg

@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="64mm"
+   height="64mm"
+   viewBox="0 0 63.999981 64"
+   version="1.1"
+   id="svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <title
+     id="logo">sinuhe.dev/logo</title>
+  <defs
+     id="defs" />
+  <g
+     id="layer1"
+     style="display:none">
+    <rect
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.183199;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
+       id="rect4575"
+       width="68.329857"
+       height="67.899437"
+       x="-0.10760616"
+       y="0.15671897" />
+  </g>
+  <g
+     id="layer6"
+     style="display:inline"
+     transform="translate(0,-67.73333)">
+    <ellipse
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.733511;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
+       id="path1043"
+       cx="32.12582"
+       cy="99.992744"
+       rx="31.071707"
+       ry="31.177364" />
+  </g>
+  <g
+     id="layer5"
+     style="display:inline"
+     transform="translate(0,-67.73333)">
+    <g
+       id="g4700"
+       style="display:inline;opacity:1;fill:#b21cbe;fill-opacity:1;stroke:#000000;stroke-width:1.04693;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1">
+      <path
+         id="path4702"
+         style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
+         d="m 30.832208,99.306623 v 4.743067 l 4.96555,1.50109 v -4.43205 z"
+         points="30.832208,104.04969 35.797758,105.55078 35.797758,101.11873 30.832208,99.306623 " />
+      <path
+         id="path4712"
+         style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
+         d="m 35.797758,101.11873 3.26925,-2.708535 v 4.896925 l -3.26925,2.24366 z"
+         points="39.067008,98.410195 39.067008,103.30712 35.797758,105.55078 35.797758,101.11873 " />
+      <path
+         id="path4704"
+         style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
+         d="m 30.832208,99.306623 2.963096,-3.125021 5.271704,2.228593 -3.26925,2.708535 z"
+         points="33.795304,96.181602 39.067008,98.410195 35.797758,101.11873 30.832208,99.306623 " />
+      <path
+         id="path4710"
+         style="fill:#1c6fbe;fill-opacity:0.850847;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
+         d="m 30.832208,104.04969 2.963096,-2.58867 5.271704,1.8461 -3.26925,2.24366 z"
+         points="33.795304,101.46102 39.067008,103.30712 35.797758,105.55078 30.832208,104.04969 " />
+      <path
+         id="path4708"
+         style="fill:#1c6fbe;fill-opacity:0.657627;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
+         d="m 33.795304,96.181602 v 5.279418 l 5.271704,1.8461 v -4.896925 z"
+         points="33.795304,101.46102 39.067008,103.30712 39.067008,98.410195 33.795304,96.181602 " />
+      <path
+         id="path4706"
+         style="fill:#1c6fbe;fill-opacity:0.535593;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
+         d="m 30.832208,99.306623 2.963096,-3.125021 v 5.279418 l -2.963096,2.58867 z"
+         points="33.795304,96.181602 33.795304,101.46102 30.832208,104.04969 30.832208,99.306623 " />
+    </g>
+    <path
+       style="fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.253318;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
+       d="m 11.165395,82.054897 48.085834,16.788915 -1.255039,3.313058 z"
+       id="path896" />
+    <path
+       style="fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 32.028836,45.114235 18.106422,22.683955 -1.711567,-0.545593 z"
+       id="path927"
+       transform="matrix(0.95591558,0,0,0.95591558,-19.451471,38.9295)" />
+    <path
+       style="fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 31.523833,70.837808 -17.088483,18.792702 0.125878,-1.618829 z"
+       id="path946"
+       transform="matrix(-0.9346334,0,0,-0.9854517,39.218821,189.98433)" />
+    <path
+       style="fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m -0.57636767,103.02518 46.59500667,-19.6116 -2.095993,2.003079 z"
+       id="path966"
+       transform="matrix(0.95591558,0,0,0.95591558,10.293548,21.654226)" />
+    <path
+       style="display:inline;fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 31.526079,70.834722 -16.771302,18.447499 0.107264,-1.598211 z"
+       id="path946-9"
+       transform="matrix(-0.9346334,0,0,-0.9854517,41.337946,191.74435)" />
+    <path
+       style="display:inline;fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m -0.52687485,103.06681 48.61219685,-19.843049 -2.234064,1.992464 z"
+       id="path966-2"
+       transform="matrix(0.95591558,0,0,0.95591558,12.41267,23.41428)" />
+  </g>
+</svg>

package/template/src/assets/i18n/index.js

@@ -0,0 +1,26 @@
+export default {
+  locales: ['EN', 'ES'],
+  defaultLocale: 'ES',
+
+  ui: {
+    back: ['Back', 'Regresar'],
+    cancel: ['Cancel', 'Cancelar'],
+    home: ['Home', 'Inicio'],
+    notFound: ['Not Found', 'Extraviado'],
+    ok: ['OK', 'Aceptar'],
+    signIn: ['Sign In', 'Iniciar Sesión'],
+    signOut: ['Sign Out', 'Cerrar Sesión']
+  },
+
+  page: {
+    name: ['My name is {0} {1} {2}', 'Mi nombre es {0} {1} {2}'],
+    user: {
+      family: ['Family', 'Famlilia']
+    },
+    module: {
+      block: {
+        docker: ['docker', 'contenedor']
+      }
+    }
+  }
+}

package/template/src/components/Counter/index.jsx

@@ -0,0 +1,34 @@
+import { useRef } from 'react'
+import './style.css'
+import { css } from 'nextia'
+import { startViewTransition } from 'utils'
+
+export default function Counter({
+  name,
+  value,
+  className,
+  style,
+  animation = 'count',
+  onChange
+}) {
+  const ref = useRef()
+
+  return (
+    <article
+      className={css('Counter-component', className)}
+      style={style}
+      name={name}
+    >
+      <button
+        type="button"
+        onClick={(e) => {
+          startViewTransition(onChange(e), ref.current, animation)
+        }}
+      >
+        Increment
+      </button>
+
+      <span ref={ref}>{value}</span>
+    </article>
+  )
+}

package/template/src/components/Counter/style.css

@@ -0,0 +1,5 @@
+.Counter-component {
+  span {
+    font-size: 60px;
+  }
+}

package/template/src/components/Message/index.jsx

@@ -0,0 +1,12 @@
+import { I18n } from 'components'
+
+export default function Messages({ name, className, style }) {
+  return (
+    <article className={className} style={style} name={name}>
+      Message-component :{' '}
+      <span>
+        <I18n value="page.user.family" />
+      </span>
+    </article>
+  )
+}

package/template/src/components/index.js

@@ -0,0 +1,10 @@
+import Counter from './Counter'
+import Message from './Message'
+// ui
+import I18n from './ui/I18n'
+import Icon from './ui/Icon'
+import Link from './ui/Link'
+import Svg from './ui/Svg'
+import Translate from './ui/Translate'
+
+export { Counter, I18n, Icon, Link, Message, Svg, Translate }

package/template/src/components/ui/I18n/index.jsx

@@ -0,0 +1,23 @@
+import i18nFile from 'assets/i18n'
+import { useFx } from 'nextia'
+
+export default function UiI18n({ value, args = [] }) {
+  const { context } = useFx()
+
+  try {
+    let text = value.split('.').reduce((ac, el) => ac[el], i18nFile)
+    text = text[i18nFile.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
+  }
+}