nuejs / nue Goto Github PK
View Code? Open in Web Editor NEWA content first web framework. Perfect for UX developers.
Home Page: https://nuejs.org
License: MIT License
A content first web framework. Perfect for UX developers.
Home Page: https://nuejs.org
License: MIT License
Can't it be an alternative to angular?
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.
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!
const path = join('www/', url)
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
`
Very nice idea but could you please switch to typescript. (I can help)
Thank you in advance.
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
<div @name="nue_add">
{ a } + { b } ={a+b}
<br />
<button type="button" @click="updateAb">a 、b update +=10</button>
<button type="button" @click="reinitialize">Reinitialize = 0</button>
<script>
a = 10
b = 100
reinitialize() {
this.update({ a: 0, b: 0 }) //After running updateAb, running reinitialize is invalid a !=0 ,b != 0
}
updateAb() {
this.a += 10
this.b += 10
}
</script>
</div>
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!
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:
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?
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. <% %>)
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.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.
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>
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?
<div @name="showModal" @click="open" style="padding: 10px ; color:blue; font-size:20px">
<span>showModal</span>
<script>
count = 0
constructor(data){
const { modal } = data;
this.modal = modal;
}
open() {
console.warn("open");
this.modal.update({ show: true, count: ++this.count }); **//forces the component instance**
}
</script>
</div>
<div @name="modal" :if="show"
style="background-color: rgba(0,0,0,.5); position: fixed; left:0;top:0;width:100%;height: 100%">
<div style="background-color: white; border: 1px; padding:10px ; margin:100px">
modal content
<span>{{count}}</span>
<button style="padding: 10px ; color:blue; font-size:20px;" @click="close">close</button>
</div>
<script>
show = false
count = 0
close() {
console.warn("close");
this.show = false; // close modal after , update not update this.show =true
}
updated()
{
console.warn("update");
console.info("count=" + this.count);
console.info("show=" + this.show);
}
</script>
</div>
<showModal></showModal>
<modal></modal>
<script type="module">
import { createApp } from '/js/nue.js'
import { lib } from '/js/test.js'
const modalApp = createApp(
lib.find(el => el.name == "modal"))
.mount(document.querySelector('modal'));
createApp(lib.find(el => el.name == "showModal"),
{ modal: modalApp })
.mount(document.querySelector('showModal'));
</script>
🤡🤡🤡🤡🤡🤡🤡🤡
Instead of cloning the 'create-nue' repository, such a CLI can make the project easier to set up and more customizable.
I saw universal hot loading on the official website, is this function not implemented yet?
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!
卷尼玛呢卷
<!-- parent component -->
<div @name="nue_add">
sum: { a } + { b } = <sum :a="a" :b="b"></sum>
<br />
Ab: { a } + { b } = <Ab :a="a" :b="b"></Ab>
<script>
a = 10
b = 100
mounted() {
console.info(this.$refs['sum'])
console.info(this.$refs['Ab']) //show undefined
}
</script>
</div>
<span @name="sum">
{ a + b }
</span>
<span @name="Ab">
{ a } { b }
</span>
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?
As per this discussion in Reddit Nue should support $emits
or similar to implement bi-directional data flow.
This is also a good project:Alins 😄
What you think about routing?
v1.0 Release time ?
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
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 used vuejs for commercial products/plugins and it worked great.
Can NUE be used from cdn?
build a neat one, nue'll win devs ❤️
how I can run the server in development mode? I just need to stop/start the run script to see my changes.
<div @name="nue_add" >
{ ty }
<br />
<button type="button" @click="setty('a')">ty=='a'</button>
<button type="button" @click="setty('b')">ty=='b' </button>
<nue_child :ty="ty"/>
<script>
ty = 'a'
setty(v){
this.ty=v;
console.info(this.$refs["nue_child"])
this.$refs["nue_child"].update();//Uncaught TypeError: this.$refs.nue_child.update is not a function
}
</script>
</div>
<div @name="nue_child">
<span>{ty}</span>
<span :if="ty==='a'">aaa</span>
<span :else>bbb</span>
</div>
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!
i'm window11, my steps:
git clone create-nue
cd create-nue
npm i
npm run start
then, get that error
An ability to add a custom layout.html
file for pages. For example: blog/my-blog-entry/layout.html
hotreload
, default true
automount
, default true
router
, default true
collection
instead of content_collection
(under consideration)Originally posted by @tipiirai in #109 (reply in thread)
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
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)
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
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.`
This framework lacks a realworld app demo which all the other frameworks have. Building the demo will grant you:
https://github.com/gothinkster/realworld
https://codebase.show/projects/realworld
"Nue is a frontend develoopment toolset."
That maybe a thing in Finland, but I expect it is more likely a development toolset.
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]?
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?
> [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"
}
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.