nextia 7.0.2 → 7.0.4

package/README.md

@@ -5,12 +5,15 @@ Create fast web applications
 ### To start
 
 ```sh
+gcl git@github.com:sinuhedev/nextia.git
 npm install
-cd template
+cd templates/web
 npm install
 node --run dev
 ```
 
-### npmjs
+### links
+
+[github.com/sinuhedev/nextia](https://github.com/sinuhedev/nextia)
 
 [npmjs.com/package/nextia](https://www.npmjs.com/package/nextia)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nextia",
   "description": "Create fast web applications",
-  "version": "7.0.2",
+  "version": "7.0.4",
   "license": "MIT",
   "type": "module",
   "engines": {

package/src/bin.js

@@ -6,20 +6,10 @@
  * 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
+ * https://github.com/sinuhedev/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' }
+import { writeFile } from 'node:fs/promises'
 
 function toPascalCase(str) {
   return str
@@ -126,8 +116,8 @@ async function createContainer(name) {
     // index.jsx
     writeFile(
       `${dirName}/index.jsx`,
-      `import { useEffect } from 'react'
-import { css, useFx } from 'nextia'
+      `import { css, useFx } from 'nextia'
+import { useEffect } from 'react'
 import functions from './functions'
 import './style.css'
 
@@ -165,48 +155,6 @@ export default { initialState }
   }
 }
 
-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]
@@ -226,11 +174,6 @@ async function main() {
       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
   }
 }
 

package/src/lib/ui.js

@@ -1,3 +1,12 @@
+/**
+ * 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 { createElement, useEffect, useRef } from 'react'
 import { useFx } from './fx'
 import { css } from './utils'

package/biome.json

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

package/template/README.md

@@ -1,29 +0,0 @@
-# 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

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

package/template/_env.prod

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

package/template/_env.test

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

package/template/_gitignore

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

package/template/biome.json

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

package/template/package.json

@@ -1,35 +0,0 @@
-{
-  "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.1.2",
-    "jsdom": "^29.0.1",
-    "vite": "^8.0.3",
-    "vitest": "^4.1.2"
-  },
-  "dependencies": {
-    "nextia": "file:../",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
-  }
-}

package/template/public/error.html

@@ -1,14 +0,0 @@
-<!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

@@ -1,105 +0,0 @@
-<?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

@@ -1,26 +0,0 @@
-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/assets/img/image.svg

@@ -1,6 +0,0 @@
-<svg width="256" height="256" viewBox="0 0 48 48" strokeWidth="1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
-   <defs id="defs" />
-   <path id="background" d="m 6.9596e-8,0 h 50.155103930404003 v 48 h -50.155103930404003 z" fill="#f7df1e" />
-   <path id="label"
-      d="m 14.776102,40.11225 3.673125,-2.223 c 0.70875,1.256438 1.353375,2.319562 2.899688,2.319562 1.482186,0 2.416875,-0.57975 2.416875,-2.835 v -15.337125 h 4.510687 v 15.400875 c 0,4.671937 -2.738625,6.798562 -6.73425,6.798562 -3.608437,0 -5.703001,-1.868812 -6.766313,-4.124249 m 15.950625,-0.483 3.67275,-2.126438 c 0.966938,1.578938 2.223563,2.738813 4.446562,2.738813 1.869189,0 3.060938,-0.934501 3.060938,-2.223375 0,-1.5465 -1.224375,-2.094376 -3.286499,-2.99625 l -1.127439,-0.48375 c -3.254437,-1.385062 -5.413124,-3.125063 -5.413124,-6.798188 0,-3.38325 2.577562,-5.961 6.605249,-5.961 2.867626,0 4.929751,0.999001 6.411751,3.608813 l -3.51225,2.255625 c -0.773438,-1.385438 -1.610813,-1.933125 -2.899688,-1.933125 -1.321124,0 -2.158875,0.83775 -2.158875,1.933125 0,1.353187 0.837751,1.90125 2.770875,2.739 l 1.127625,0.483187 c 3.834375,1.643438 5.993063,3.318751 5.993063,7.088251 0,4.060124 -3.18975,6.283124 -7.475063,6.283124 -4.188562,0 -6.895125,-1.997625 -8.216062,-4.607625" />
-</svg>

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

@@ -1,33 +0,0 @@
-import { useRef } from 'react'
-import './style.css'
-import { css, startViewTransition } from 'nextia'
-
-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

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

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

@@ -1,12 +0,0 @@
-import { I18n } from 'nextia'
-
-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

@@ -1,6 +0,0 @@
-import Counter from './Counter'
-import Message from './Message'
-// ui
-import Translate from './ui/Translate'
-
-export { Counter, Message, Translate }

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

@@ -1,20 +0,0 @@
-import { useFx } from 'nextia'
-
-export default function UiTranslate({ className, style }) {
-  const { context } = useFx()
-
-  const { currentLocale, locales } = context.state.i18n
-  const { changeI18n } = context.fx
-
-  return (
-    <article className={className} style={style}>
-      <select value={currentLocale} onChange={changeI18n}>
-        {locales.map((e) => (
-          <option key={e} value={e} className="m-2">
-            {e}
-          </option>
-        ))}
-      </select>
-    </article>
-  )
-}

package/template/src/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="utf-8" />
-	<title>%PUBLIC_TITLE%</title>
-	<link rel="shortcut icon" href="logo.svg" />
-	<meta name="version" content="%VERSION%" />
-	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
-	<link rel="stylesheet" href="theme/index.css" />
-	<script type="module" src="index.jsx"></script>
-</head>
-
-<body>
-	<div id="root"></div>
-</body>
-
-</html>

package/template/src/index.jsx

@@ -1,4 +0,0 @@
-import { createRoot } from 'react-dom/client'
-import Pages from './pages'
-
-createRoot(document.getElementById('root')).render(<Pages />)

package/template/src/pages/env/functions.js

@@ -1,3 +0,0 @@
-const initialState = {}
-
-export default { initialState }

package/template/src/pages/env/index.jsx

@@ -1,26 +0,0 @@
-import { css, env, useFx } from 'nextia'
-import { useEffect } from 'react'
-import functions from './functions'
-import './style.css'
-
-export default function EnvPage() {
-  const { state, fx } = useFx(functions)
-
-  // env
-  useEffect(() => {
-    console.log('env:', env)
-  }, [])
-
-  return (
-    <section className={css('EnvPage', '')}>
-      <br />
-      <br />
-
-      <div style={{ display: 'flex' }}>
-        <pre style={{ margin: '0 50px 0 50px' }}>
-          env = {JSON.stringify(env, undefined, 2)}
-        </pre>
-      </div>
-    </section>
-  )
-}

package/template/src/pages/env/style.css

@@ -1,2 +0,0 @@
-.EnvPage {
-}

package/template/src/pages/functions.js

@@ -1,37 +0,0 @@
-import i18nFile from 'assets/i18n'
-
-const initialState = {
-  i18n: {
-    currentLocale:
-      window.localStorage.getItem('i18n') || i18nFile.defaultLocale,
-    locales: i18nFile.locales
-  },
-  loading: false,
-  num: 0
-}
-
-function changeI18n({ payload, set }) {
-  const { value } = payload.target
-  set({ i18n: { currentLocale: value } })
-  window.localStorage.setItem('i18n', value)
-}
-
-function increment({ state, set }) {
-  set({ num: state.num + 1 })
-}
-
-function decrement({ state, set }) {
-  set({ num: state.num - 1 })
-}
-
-function zero({ payload, set }) {
-  set({ num: payload.value })
-}
-
-export default {
-  initialState,
-  changeI18n,
-  increment,
-  decrement,
-  zero
-}

package/template/src/pages/home/functions.js

@@ -1,43 +0,0 @@
-const initialState = {
-  channel: 7,
-  msg: 'https://sinuhe.dev',
-  data: { user: 'Sinuhe MB' },
-  myArray: ['A', 'B', 'C'],
-  setNameValue: 'name value',
-  form: {
-    funny: false,
-    gender: 'M',
-    name: {
-      firstName: 'Sinuhe',
-      lastName: 'Maceda'
-    },
-    year: 33,
-    moreArray: [[[50, 40, 10]]]
-  },
-  ls: {
-    users: [
-      {
-        name: 'sinuhe',
-        year: 33
-      },
-      {
-        name: 'alberto',
-        year: 20
-      }
-    ]
-  }
-}
-
-function increment({ state, set }) {
-  set({ channel: state.channel + 1 })
-}
-
-function decrement({ state, set }) {
-  set({ channel: state.channel - 1 })
-}
-
-export default {
-  initialState,
-  increment,
-  decrement
-}