nuejs / nue Goto Github PK

• Plain hotreload, default true
• Plain automount, default true
• Plain router, default true
• Plain collection instead of content_collection (under consideration)

Originally posted by @tipiirai in #109 (reply in thread)

This framework lacks a realworld app demo which all the other frameworks have. Building the demo will grant you:

• something you can benchmark against other frameworks
• real comparison in bundlesizes
• all the fundamentals for your DOCS - the real world app will provide you all kinds of code examples for your docs along with a whole project-example for anyone interested in using this framework.

https://github.com/gothinkster/realworld
https://codebase.show/projects/realworld

For a newb like me, getting started with something like bootstrap or material UI makes things a lot faster. Is there a component library already or a guide on styling or converting styles from other libraries?

Nuejs

The original English page ran normally with addition and subtraction, but when I translated it into a Chinese page, it displayed an exception.

Vuejs

Although the translation effect failed, at least the displayed values were correct

Hi Tero,
I like it! I set up a website with your minimal website as base. All text is in content.data. Now I need breaks
in the strings for better readability. I modified components.nue and put this in the script:

   	    if (desc) {
    		desc = desc.replace(/\^/g, "<br/>")
	    	console.log(desc)
		return { name, desc }
	 }

Example: - Montag: Vormittags 08:00 - 11:00 Uhr ^ Nachmittags 15:00 - 17:00 Uhr
Replace: - Montag: Vormittags 08:00 - 11:00 Uhr <br><br/> Nachmittags 15:00 - 17:00 Uhr

The output string/HTML displays "<br><br/>". If I use '\n' the 2nd part of the string is gone.
Is it possible to allow HTML stuff in these strings or is there a short term solution to get the breaks?

When browsing a cool repo, especially one that has a more mainstream dev appeal (frameworks/libraries, not protocols/drivers) I personally like to browse the public-facing web site first, to get a feel for the selling points, the docs, the official guides.

The link is usually found either at the top of the README or in the GitHub description field:

With Nue JS I was surprised to find that the official project web site is not linked from the repo -- which is a shame since the web site is really nice and communicates what Nue JS aims to do in a good way.

So maybe add the link? :-)

🤡🤡🤡🤡🤡🤡🤡🤡

I saw universal hot loading on the official website, is this function not implemented yet?

how I can run the server in development mode? I just need to stop/start the run script to see my changes.

error info :
return comps[0].render(data, comps)
^
TypeError: Cannot read properties of undefined (reading 'render')

// import rendering method
import { renderFile } from 'nue'

// render the component
const html = renderFile('media-object.nue', {
title: 'Media object',
desc: 'One object to rule them all',
img: 'img/art.jpg',
type: 'banner',
})

// output
console.info(html)

After following the installation process, I get the following error after npm run start:

npm run start

> [email protected] start
> ./scripts/cli.js start

'.' is not recognized as an internal or external command, operable program or batch file.

> [email protected] start
> npm run minify && npm run render && npm run compile && npm run serve


> [email protected] minify
> ./scripts/minify.js

'.' is not recognized as an internal or external command,
operable program or batch file.

Might be wrong from my computer . can anyone suggest me where i am wrong?

Here is the Package.json :

{
  "name": "create-nue",
  "type": "module",
  "version": "0.1.3",
  "homepage": "https://github.com/nuejs/create-nue",
  "description": "A recommended way to start a Nue project",

  "repository": {
    "url": "https://github.com/nuejs/create-nue.git",
    "type": "git"
  },
  "bin": {
    "create-nue": "./scripts/init.js"
  },

  "scripts": {
    "start": "npm run minify && npm run render && npm run compile && npm run serve",
    "serve": "cd www && ../scripts/server.js",
    "compile": "./scripts/compile.js",
    "minify": "./scripts/minify.js",
    "render": "./scripts/render.js"
  },
  "dependencies": {
    "nuejs-core": "^0.1.0",
    "js-yaml": "^4.1.0"
  }
}

v1.0 Release time ?

卷尼玛呢卷

Seriously, who write this code written in your comparison page ?

Nobody would ever write this, whatever the framework.

Maybe that nuejs framework saves lines, but please provide acceptable code for a fair comparison!

Solution first:

In package.json do this changes:

  "scripts": {
    "start":   "nue create  || (./scripts/cli.js minify --prod && ./scripts/cli.js render && ./scripts/cli.js compile && ./scripts/cli.js server)",
    "minify":  "nue minify  || ./scripts/cli.js minify --prod",
    "render":  "nue render  || ./scripts/cli.js render",
    "compile": "nue compile || ./scripts/cli.js compile",
    "serve":   "nue server  || ./scripts/cli.js server"

Remove the cd www part!

Modify server.js in scripts

    const path = join('www/', url)

All scripts above will run

Starting a new create-nue and get that. missing scripts/cli.js is in scripts dir.

`

[email protected] serve
cd www && nue server || ./scripts/cli.js server

sh: line 1: nue: command not found
sh: line 1: ./scripts/cli.js: No such file or directory
Starting works in the following case, but after opening localhost:8080 it's over. Website crash.

[email protected] start
nue create || (./scripts/cli.js minify --prod && ./scripts/cli.js render && ./scripts/cli.js compile && ./scripts/cli.js server)

sh: line 1: nue: command not found
No builder found (esbuild or Bun) www/nue.js is not minified
wrote www/index.html
compiled www/islands.js
Node HTTP server at http://127.0.0.1:8080/
node:events:492
throw er; // Unhandled 'error' event
^

Error: ENOENT: no such file or directory, open 'index.html'
Emitted 'error' event on ReadStream instance at:
at emitErrorNT (node:internal/streams/destroy:151:8)
at emitErrorCloseNT (node:internal/streams/destroy:116:3)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: 'index.html'
}

Node.js v20.7.0
`

i'm window11, my steps:

1. git clone create-nue

2. cd create-nue

3. npm i

4. npm run start

then, get that error

In the current template syntax, a value is passed from a parent component to a child component using :bind , etc., but it is difficult to quickly see the name of the attribute that the child component accepts. Therefore, using the fact that the NueJS template syntax is based on the ES6 class, I would like to propose the following writing style:

<div @name="media-object" class="{ type }">
  <img src="{ img }">
  <aside>
    <h3>{ #title }</h3>
    <p>{ #format(desc) }</p>
  </aside>

  <!-- instance variables and methods -->
  <script>
    // attributes received from the parent are declared as public fields.
    // they serve the purpose of self-documentation, viewing the attributes as the API of the component.
    // default values are optional.
    type
    img = './noImage.png'
    desc = ''

    // instance variables are declared as private fields
    #title = 'Default title'

    // called when the component is created
    constructor(data) {
    }

    // also, instance methods are declared as private members
    #format(value) {
    }
  </script>

</div>

I would appreciate your opinion.
Thanks!

Mainly used for generating files based on React templates in Node.js, { } syntax conflicts with the syntax in React. Is it possible to customize the delimiter?

Custom delimiters (e.g. <% %>)

An ability to add a custom layout.html file for pages. For example: blog/my-blog-entry/layout.html

I used vuejs for commercial products/plugins and it worked great.
Can NUE be used from cdn?

As per this discussion in Reddit Nue should support $emits or similar to implement bi-directional data flow.

hi,I'm a beginer for nuejs. when use create-nue project for learning. I found render.js ignore @xxx handle, but sometime for ssr,the server component will has some js. this is a demo exsample:

<header @mounseleave="closeMenu">
        // .... someelse info
       <a @mouseenter>menu1</a>
       // ...
</header>

like above, how can I add some js function to this server component,if dont use client component or [Isomorphic components]?

Nue.js doesn't render what comes after an html comment

Example:

 <input label="firstname" type="text" :value="contactInput.firstname" 
    @change="contactInput.firstname = $event.target.value">
  <!--<add-contact :callback="addContact"></add-contact>-->
  <input label="lastname" type="text" :value="contactInput.lastname"
    @change="contactInput.lastname = $event.target.value">
  <input label="gender" type="text" :value="contactInput.gender"
    @change="contactInput.gender = $event.target.value">
  <!--<add-contact :callback="addContact"></add-contact>-->
  <button @click="addContact">Add contact</button>
  <div>{ contactInput.firstname }</div>

What comes after the second comment doesn't get rendered

Tested possible fix #74

In expr.js's parseFor function, codes do not distinguish for in and for of here . However, for in and for of should be distinguished because for in only takes index i in first argument if array and only takes key in first argument if object. See command prompt results below.

[ for in Object ] ↓

[ for in Array ] ↓

[ for in Object.entry(object) ] ↓

And here is a point. If array I can come up with how to fix it. See codes below.

export function parseFor(str) {
  let [prefix, forType, expr ] = str.trim().split(/\s+(in|of)\s+/)
  prefix = prefix.replace('(', '').replace(')', '').trim()
  expr = setContextTo(expr)

  if (forType=== "of") {
    // "for of" syntax
    // Object.entries()
    if (prefix[0] == '[') {
      const keys = parseKeys(prefix)
      return [ keys.slice(0, 2), expr, keys[2] || '$index', true ]

    // Object deconstruction
    } else if (prefix[0] == '{') {
      const { keys, index } = parseObjectKeys(prefix)
      return [ keys, expr, index || '$index' ]

    // Normal loop variable
    } else {
      const [ key, index='$index' ] = prefix.split(/\s?,\s?/)
      return [ key, expr, index ]
    }
  } else {
    // "for in" syntax only takes first i if array
    if (prefix[0] === '[') {
      const keys = parseKeys(prefix)
      return [undefined, expr, keys[0]] // Can I pass undefined in keys here?
    } else if (prefix[0] === '{' ) {
      return [ undefined, expr, "$index" ] // Can I pass undefined in keys here?
      // or throw error since only undefined to be returned in for loop
    } else {
      const [index, _rest] = prefix.split(/\s?,\s?/)
      return [undefined, expr, index] // Can I pass undefined in keys here?
    }
  }
}

But for Object loop I cannot discover any idea to implement, since There are no way to recognize whether expr is a object or a array.
Therefore I want to implement for in for array and leave for in for object for further works.

Any questions, rebuts or suggestions are welcome!

Thank you for reading the issue.

[ Edit ]
I have read the tests codes and docs, and I realize that you have used for in syntax for many places. So if you think fixing these for in that have written is troublesome, it may not be something you have to do.

Instead of using this placeholder syntax for client-side components:

<nue-island island="my-component"></nue-island>

I'm proposing this:

<my-component engine="nue"></my-component>

Which looks more like a web-component. There needs to be some specifier, that the component is powered by Nue. Proposing "engine". Could be "data-engine" as well. Any suggestions / thoughts?

"Nue is a frontend develoopment toolset."

That maybe a thing in Finland, but I expect it is more likely a development toolset.

I have to say nuejs is exactly what I expected, it seems awesome! Since React/Vue is nightmare for beginners, nuejs seems more friendly to those who stay on old school frontend technical stacks (like me🤣). I've read all the docs and blogs on the official site, but still not sure how to start a project with it. Also googled for a while but no luck. Is there any tutorial from zero? Such as a simple to-do demo?

Thanks!

This is also a good project：Alins 😄

What you think about routing?

What version of Bun is running?
1.0.17

What platform is your computer?
MacBook Air, Chip: Apple M2, MacOS Ventura 13.4

What steps can reproduce the bug?

bun install nuekit --global

// bun add v1.0.17 (5e60861c)
// installed [email protected] with binaries:
//  - nue
// 1 package installed [11.00ms]

bun create nue@latest      
// error: Failed to run "create-nue" due to error InvalidExe

What is the expected behavior?
When I run "bun create nue@latest" -> I expect to start installing process.

What do you see instead?
When I run "bun create nue@latest" -> I see error instead

Can't it be an alternative to angular?

Instead of cloning the 'create-nue' repository, such a CLI can make the project easier to set up and more customizable.

Tried git clone [email protected]:nuejs/create-nue.git
Get Cloning into 'create-nue'...
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

  `Please make sure you have the correct access rights`
  `and the repository exists.`

How exactly we should separate logic, layout, and styles into different files in a Nue application?

The main task of the components of a large application is to make abstractions where appropriate and possible.

In my react projects, I've used the following separation of components:

1. Layout: modules/users/layouts/SignInForm/index.tsx
2. Styles: modules/users/layouts/SignInForm/styles.tsx
3. Logic: modules/users/hooks/useSignInForm.ts

What is the best way to properly split the logic, styles, and layout into three different files with "imports" of each other in Nue.js?

I don't know if this is intended behaviour or not, but I thought I'd let you know.

I created this project using create-nue with node.

This code Returns ( Text: NaN ) in the button element:

components.nue:

<!-- test-button -->
<button @name="test-button">
  text: {button-text}
</button>

layout.nue:

<html>
  <meta charset="utf-8">
  <test-button button-text="it worked" />
  <script type="module" src="setup.js"></script>
</html>

While this code returns ( text: it worked ) as expected:

components.nue:

<!-- test-button -->
<button @name="test-button">
  text: {buttontext}
</button>

layout.nue:

<html>
  <meta charset="utf-8">
  <test-button buttontext="it worked" />
  <script type="module" src="setup.js"></script>
</html>

Very nice idea but could you please switch to typescript. (I can help)
Thank you in advance.

Inline svg elements in .nue files get replaced with <nue-island>

<svg style="display:none;>
  <symbol id="collapse" viewBox="0 0 16 16">
    <polygon points="11.62 3.81 7.43 8 11.62 12.19 10.09 13.71 4.38 8 10.09 2.29 11.62 3.81" />
  </symbol>
</svg>

in a .nue file is compiled to

<svg style="display:none;>
  <nue-island id="collapse" viewBox="0 0 16 16">
    <nue-island points="11.62 3.81 7.43 8 11.62 12.19 10.09 13.71 4.38 8 10.09 2.29 11.62 3.81" />
  </nue-island>
</svg>

We should add the svg elements to the standard element list.
SVG container elements
SVG graphics elements

build a neat one, nue'll win devs ❤️

While React and JXS claim to be "Just JavaScript", Nue can be thought of as "Just HTML". Nue is perfect for UX developers focusing on interaction design, accessibility, and user experience.

It seems that JSX should be here.

That's a pr related to this issue:#3