nextia 6.0.2 → 6.1.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Sinuhe Dev. https://sinuhe.dev
+Copyright (c) 2025 Sinuhe Maceda https://sinuhe.dev
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,26 +1,16 @@
 # nextia
+
 Create fast web applications
 
 ### To start
-```sh
-npm install
-pnpm install
-#
-cd test
-```
 
-### To test
 ```sh
 npm install
-pnpm install
-#
-node --run test:my-app
+cd test-webapp
+npm install
+node --run dev
 ```
 
-### To create project
-```sh
-pnpm i -g nextia
-nextia my-app
-```
+### npmjs
 
 [npmjs.com/package/nextia](https://www.npmjs.com/package/nextia)

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "nextia",
   "description": "Create fast web applications",
-  "version": "6.0.2",
+  "version": "6.1.1",
   "engines": {
     "node": ">22"
   },
   "type": "module",
   "license": "MIT",
   "author": {
-    "name": "Sinuhe Dev.",
+    "name": "Sinuhe Maceda",
     "email": "sinuhe.dev@gmail.com",
     "url": "https://sinuhe.dev"
   },
@@ -20,23 +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 out my-app",
+    "clean": "rm -fr node_modules package-lock.json pnpm-lock.yaml .coverage target",
     "format": "biome format",
-    "lint": "biome lint",
-    "check": "biome check --reporter=summary",
-    "test": "node src/bin.js",
-    "test:my-app": "node src/bin.js my-app"
+    "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"
   },
   "peerDependencies": {
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.3.14"
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "^4.0.18",
+    "jsdom": "^29.0.0",
+    "vitest": "^4.0.18"
   }
 }

package/src/lib.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2025 Sinuhe Dev. https://sinuhe.dev
+ * 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.
@@ -7,36 +7,34 @@
  * https://github.com/sinuhedev/nextia
  */
 
-import { createContext, use, useReducer, useCallback } from 'react'
+import { createContext, use, useReducer } from 'react'
 
-const Context = createContext()
+const PagesContext = createContext()
+const isLogger = import.meta.env.DEV
 
 /**
- * css
+ * util
  */
+
 function css(...classNames) {
-  classNames = classNames
-    .filter((e) => e)
+  return classNames
     .reduce((accumulator, currentValue) => {
       if (typeof currentValue === 'string') {
-        accumulator.push(currentValue)
+        accumulator.push(currentValue.trim())
       } else if (
         !Array.isArray(currentValue) &&
         typeof currentValue === 'object'
       ) {
         for (const e in currentValue) {
-          if (currentValue[e]) accumulator.push(e)
+          if (currentValue[e]) accumulator.push(e.trim())
         }
       }
       return accumulator
     }, [])
-
-  return [...new Set(classNames)].join(' ')
+    .filter((e) => e)
+    .join(' ')
 }
 
-/**
- * values
- */
 function values(state, payload, value) {
   const paths = payload.split('.')
 
@@ -63,9 +61,6 @@ function values(state, payload, value) {
   return stateClone
 }
 
-/**
- * merge
- */
 function merge(target, source) {
   // in array return all source
   if (Array.isArray(target)) return source
@@ -83,60 +78,10 @@ function merge(target, source) {
   return output
 }
 
-/**
- * logger
- */
-
-const logger = () => {
-  if (import.meta?.env) {
-    return import.meta.env.DEV && import.meta.env.VITE_LOGGER !== 'false'
-  }
-}
-
-const log = (reducer) => {
-  const getPayload = (action) => {
-    const { type, payload } = action
-
-    if (type === 'change') {
-      const { name, type, checked, value } = payload.target
-      return {
-        name,
-        type,
-        checked,
-        value
-      }
-    }
-
-    if (typeof payload !== 'object') {
-      return `(${payload ?? ''})`
-    }
-
-    return payload
-  }
-
-  const reducerWithLogger = useCallback(
-    (state, action) => {
-      const newState = reducer(state, action)
-
-      console.log(
-        `%c${action.isContext ? 'Context' : 'Page   '} %c${action.type}`,
-        'color: #90b1d1',
-        'color: #6592c8',
-        getPayload(action),
-        { state, new_state: newState }
-      )
-
-      return newState
-    },
-    [reducer]
-  )
-
-  return reducerWithLogger
-}
-
 /**
  * reducer
  */
+
 const reducer = (state, action) => {
   const { type, payload, initialState } = action
 
@@ -182,14 +127,49 @@ const reducer = (state, action) => {
   }
 }
 
+const reducerLogger = (state, action) => {
+  const newState = reducer(state, action)
+
+  const payloadLog = (action) => {
+    const { type, payload } = action
+
+    if (type === 'change') {
+      const { name, type, checked, value } = payload.target
+      return {
+        name,
+        type,
+        checked,
+        value
+      }
+    }
+
+    if (typeof payload !== 'object') {
+      return `(${payload ?? ''})`
+    }
+
+    return payload
+  }
+
+  console.log(
+    `%c${action.isContext ? 'Pages Context' : 'Page'} %c${action.type}`,
+    'color: #90b1d1',
+    'color: #6592c8',
+    payloadLog(action),
+    { state, new_state: newState }
+  )
+
+  return newState
+}
+
 /**
  * useFx
  */
+
 function useFx(functions = { initialState: {} }) {
-  const context = use(Context)
+  const pageContext = use(PagesContext)
   const { initialState } = functions
   const [state, dispatch] = useReducer(
-    logger() ? log(reducer) : reducer,
+    isLogger ? reducerLogger : reducer,
     initialState
   )
 
@@ -197,7 +177,7 @@ function useFx(functions = { initialState: {} }) {
   const commonActions = ['set', 'show', 'hide', 'change', 'reset'].reduce(
     (acc, e) => {
       acc[e] = (payload) =>
-        dispatch({ type: e, payload, initialState, isContext: !context })
+        dispatch({ type: e, payload, initialState, isContext: !pageContext })
       return acc
     },
     {}
@@ -207,16 +187,16 @@ function useFx(functions = { initialState: {} }) {
   const actions = Object.keys(functions).reduce((ac, e) => {
     if (functions[e] instanceof Function) {
       ac[e] = (payload) => {
-        const props = {
+        const actionsProps = {
           ...commonActions,
           state,
           payload
         }
-        if (context) {
-          props.context = context
+        if (pageContext) {
+          actionsProps.context = pageContext
         }
 
-        return functions[e](Object.freeze(props))
+        return functions[e](Object.freeze(actionsProps))
       }
     }
     return ac
@@ -228,11 +208,11 @@ function useFx(functions = { initialState: {} }) {
     state,
     fx: { ...commonActions, ...actions }
   }
-  if (context) {
-    props.context = context
+  if (pageContext) {
+    props.context = pageContext
   }
 
   return Object.freeze(props)
 }
 
-export { css, Context, useFx }
+export { css, PagesContext, useFx }

package/src/bin.js

@@ -1,233 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Copyright (c) 2025 Sinuhe Dev. 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 pkg from '../package.json' with { type: 'json' }
-import { fileURLToPath } from 'node:url'
-import { dirname } from 'node:path'
-import {
-  mkdir,
-  writeFile,
-  readFile,
-  cp,
-  rename,
-  access
-} from 'node:fs/promises'
-
-async function createPage(name) {
-  const toPascalCase = (str) =>
-    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('')
-
-  const dirName = `./src/pages/${name}`
-
-  try {
-    await mkdir(dirName)
-
-    const pageName = toPascalCase(name) + 'Page'
-
-    // index.jsx
-    writeFile(
-      `${dirName}/index.jsx`,
-      `import React, { useEffect } from 'react'
-import { useFx, css } from 'nextia'
-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 }
-`
-    )
-  } catch (err) {
-    console.error(err)
-  }
-}
-
-async function createComponent(name) {
-  const dirName = `./src/components/${name}`
-
-  try {
-    await mkdir(dirName)
-    const componentName = name.replaceAll('/', '') + '-component'
-
-    // index.jsx
-    writeFile(
-      `${dirName}/index.jsx`,
-      `import React, { useEffect } from 'react'
-import { css } from 'nextia'
-import './style.css'
-
-export default function ${name} ({ className, style }) {
-  return (
-    <article className={css('${componentName}', className)} style={style}>
-      ${componentName}
-    </article>
-  )
-}
-`
-    )
-
-    // style.css
-    writeFile(
-      `${dirName}/style.css`,
-      `.${componentName}  {
-}`
-    )
-  } catch (err) {
-    console.error(err)
-  }
-}
-
-async function createComponentFx(name) {
-  const dirName = `./src/components/${name}`
-
-  try {
-    await mkdir(dirName)
-    const containerName = name.replaceAll('/', '') + '-component'
-
-    // index.jsx
-    writeFile(
-      `${dirName}/index.jsx`,
-      `import React, { useEffect } from 'react'
-import { useFx, css } from 'nextia'
-import functions from './functions'
-import './style.css'
-
-export default function ${name} ({ 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 }
-`
-    )
-  } catch (err) {
-    console.error(err)
-  }
-}
-
-async function createProject(name) {
-  let projectPath
-
-  try {
-    projectPath = process.cwd() + `/${name}/`
-    await access(projectPath)
-    console.error(`The "${name}" already exists.`)
-    return
-  } catch (error) {}
-
-  const template = dirname(fileURLToPath(import.meta.url)) + '/template/'
-
-  // Create new project
-  try {
-    const mv = (fileName) =>
-      rename(projectPath + `_${fileName}`, projectPath + `.${fileName}`)
-    await cp(template, projectPath, { recursive: true })
-    const replaceToken = async (filename, token, value) => {
-      const content = await readFile(projectPath + filename, 'utf8')
-      const updated = content.replaceAll(token, value)
-      await writeFile(projectPath + filename, updated, 'utf8')
-    }
-
-    await mv('env.dev')
-    await mv('env.prod')
-    await mv('env.test')
-    await mv('gitignore')
-
-    // replace tokens
-    await replaceToken('README.md', 'TEMPLATE', name)
-    await replaceToken('package.json', 'TEMPLATE', name)
-    await replaceToken('package.json', 'VERSION', pkg.version)
-  } catch (err) {
-    console.error(err)
-  }
-}
-
-/**
- * main
- */
-
-const ARG1 = process.argv[2]
-const ARG2 = process.argv[3]
-
-switch (ARG1) {
-  case 'page':
-    if (ARG2) createPage(ARG2)
-    else console.warn('node --run page <page-name>')
-    break
-
-  case 'component':
-    if (ARG2) createComponent(ARG2)
-    else console.warn('node --run component <ComponentName>')
-    break
-
-  case 'container':
-    if (ARG2) createComponentFx(ARG2)
-    else console.warn('node --run container <ContainerName>')
-    break
-
-  default:
-    if (ARG1) createProject(ARG1)
-    else
-      console.info(`
-  Version ${pkg.version}
-  
-  npx nextia@latest <ProjectName>
-    `)
-    break
-}

package/src/template/README.md

@@ -1,30 +0,0 @@
-# TEMPLATE
-
-# To start
-Open http://localhost:3000 to view it in the browser.
-
-```sh
-npm install
-pnpm 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
-VITE_TITLE=TITLE
-VITE_LOGGER=false
-VITE_VIEW_TRANSITION=false
-```

package/src/template/_env.dev

@@ -1 +0,0 @@
-VITE_TITLE=dev

package/src/template/_env.prod

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

package/src/template/_env.test

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

package/src/template/_gitignore

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

package/src/template/biome.json

@@ -1,43 +0,0 @@
-{
-  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
-  "assist": {
-    "actions": {
-      "source": {
-        "organizeImports": "off"
-      }
-    }
-  },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "recommended": true,
-      "correctness": {
-        "noUnusedVariables": "error"
-      }
-    }
-  },
-  "formatter": {
-    "enabled": true,
-    "formatWithErrors": false,
-    "indentStyle": "space",
-    "indentWidth": 2
-  },
-  "javascript": {
-    "formatter": {
-      "semicolons": "asNeeded",
-      "quoteStyle": "single",
-      "jsxQuoteStyle": "double",
-      "trailingCommas": "none"
-    }
-  },
-  "css": {
-    "formatter": {
-      "enabled": true
-    }
-  },
-  "json": {
-    "formatter": {
-      "enabled": true
-    }
-  }
-}

package/src/template/package.json

@@ -1,37 +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 pnpm-lock.yaml .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",
-    "componentFx": "nextia componentFx",
-    "test": "vitest",
-    "test:name": "vitest run --testNamePattern",
-    "test:silent": "vitest run --silent",
-    "test:coverage": "vitest run --silent --coverage"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "^2.3.14",
-    "@vitejs/plugin-react": "^5.1.3",
-    "@vitest/coverage-v8": "4.0.18",
-    "autoprefixer": "^10.4.24",
-    "jsdom": "^28.0.0",
-    "vite": "^7.3.1",
-    "vitest": "4.0.18"
-  },
-  "dependencies": {
-    "nextia": "^VERSION",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
-  }
-}

package/src/template/public/error.html

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