nullstack / nullstack Goto Github PK
View Code? Open in Web Editor NEWFeature-Driven Full Stack JavaScript Components
Home Page: https://nullstack.app
License: MIT License
Feature-Driven Full Stack JavaScript Components
Home Page: https://nullstack.app
License: MIT License
Hello, i try to run the base project but i get this error:
C:\phagane\node_modules\nullstack\scripts\index.js:30
const [file, loader, ...trace] = stats.toJson('errors-only', {colors: true}).children[0].errors[0].split('\n');
^
TypeError: Cannot read property 'split' of undefined
at logTrace (C:\phagane\node_modules\nullstack\scripts\index.js:30:104)
at C:\phagane\node_modules\nullstack\scripts\index.js:65:5
at Watching.handler (C:\phagane\node_modules\webpack\lib\MultiCompiler.js:225:10)
at C:\phagane\node_modules\webpack\lib\Watching.js:99:9
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\phagane\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
at AsyncSeriesHook.lazyCompileHook (C:\phagane\node_modules\tapable\lib\Hook.js:154:20)
at Watching._done (C:\phagane\node_modules\webpack\lib\Watching.js:98:28)
at C:\phagane\node_modules\webpack\lib\Watching.js:73:19
at Compiler.emitRecords (C:\phagane\node_modules\webpack\lib\Compiler.js:499:39)
at C:\phagane\node_modules\webpack\lib\Watching.js:54:20
Node -V : 14.15.5
Web app manifest should have the filename extension 'webmanifest'.
This issue will at least touch:
The documentation about how to generate manifest.json should be updated to manifest.webmanifest
Make in project root a webpack config.
must has a function that call the builder code, like this:
nullstackWebpack({ Options })
Add default support to dotenv
this would also complement nullstack/create-nullstack-app#3
In order to be backwards compatible it would have to call config() on the start of server/index.js but verify if .env file exists (unless the package already does that)
'meta[name=theme-color]' is not supported by Edge, Firefox, Firefox Android, Opera, Safari, iOS Safari.
Remove the tag from the server/template.js to fix the issue.
Use hot module reload but working around the fact that the server needs the context to be flushed and start needs to be rerun after each client reload so the user is sure that the environment is not affected by old changes.
If we have to give up on Webpack for this, so be it.
The 'x-ua-compatible' meta element should not be specified as it is not needed.
Remove the tag from the server/template.js to fix the issue.
At my tests, i've received this error:
rerender.js:124 Uncaught (in promise) TypeError: Cannot read property 'childNodes' of undefined
at rerender (rerender.js:124)
at rerender (rerender.js:124)
at rerender (rerender.js:124)
at rerender (rerender.js:124)
at rerender (rerender.js:124)
at rerender (rerender.js:124)
at Function.start (index.js:59)
rerender @ rerender.js:124
rerender @ rerender.js:124
rerender @ rerender.js:124
rerender @ rerender.js:124
rerender @ rerender.js:124
rerender @ rerender.js:124
start @ index.js:59
async function (async)
start @ index.js:55
./index.js @ index.js:4
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83
This, occurs because I forget the tag at the table header. But is a recurring error in forgetting tags.
My suggestion is turn this error more understandable for devs.
Replace the main tag at the application root with the body tag
The body tag will be a fragment alias but will reflect the attributes in the DOM body allowing the programmer to control the body directly.
However, the application code will still be inside the "#application" div but this time without the main root
Add a Logo component to Nullstack that renders svg logo:
import Logo from 'nullstack/Logo';
export default function Home() {
<Logo theme="dark" accent />
}
I still need help naming the options:
Should the theme option load the opposite color?
Should i rename it to color/scheme and keep it dark / light?
copy functional components from the times react knew its place
Implement pure functional components
functional components will receive the global context + inline attributes, but will have no state of its own
discussion: force components to be named functions for the sake of debug sanity
Allow components to hook into other instance methods.
The API is not yet decided but one proposal is something like:
// for server hooks filtering by function name
static async before({invoker}) {
if(invoker.methodName === 'somePrivateMethod') {
response.status(401);
}
}
// for instance hooks that run after every method
prepare({instances}) {
instances.counter.after(({invoker}) => {
invoker.count++;
})
}
hooks should be able to modify the context
static async before(context) {
const {database, request} = context;
const user = await database.collection('users').findOne({email: request.session.email});
if(user) {
context.user = user;
} else {
response.status(401);
}
}
To be defined, but the main goal is to work easily on Lambda and Vercel out of the box
Currently when you invoke a server function named "deleteProduct" for example the worker.loading.deleteProduct becomes true
I propose we change it from true to a reference to the params passed to it.
It would make controlling state over lists easier as we could implement something like:
<button disabled={worker.loading.deleteProduct.id === product.id}> delete </button>
Also the proxy would be able to return undefined instead of false for any other situation
Vercel is hot rn and I think it'd help to drive adoption/awareness to have the framework listed under Vercel templates. Not sure how to do this, potentially reaching out directly or through the vercel/vercel
repo?
possible 2 configs that could go into .env file by default. These 2 options change according to environment so it would make sense.
also this would help configuring the project baseURL
NULLSTACK_SERVER_PORT
NULLSTACK_PROJECT_DOMAIN
consideration:
Most hosts have a standard PORT env variable that may be used as a fallback
project.apiUrl
or some other key should allow the server to be hosted into another host away from the client. This might clash with the implementation of project.cdn that allows the assets to be hosted elsewhere.
The difference is that in this case we want to completely skip SSR.
When building, an index.html that points to the client should be generated.
The Virtual Pipeline should be empty before the rendering cycle.
The project should be able to run on both SSR mode and this new mode at the same time, but the HTML file should be served by the user to simulate a decoupled server.
This is the first step towards Nullstack Native.
For convenience, it'd be cool to be able to choose the dev server port without resorting to the .env
file.
Project should have a viewport key that is used to generate the template
you should be able to configure the viewport by both using
project.viewport = "width=device-width, initial-scale=1, shrink-to-fit=no";
or
NULLSTACK_PROJECT_VIEWPORT="width=device-width, initial-scale=1, shrink-to-fit=no"
The default value for viewport should be
width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no viewport-fit=cover
relevant files
The idea is to be able to forward anchor state directly to the next route as Ember.JS does.
tbh: I'm not sure its worth doing since it is just syntactic sugar over what context can already do.
Given an anchor like <a href="/books/1" forward={{title: 'book 1'}}> book 1 </a>
the next component that matches the route would be initialized with the title = 1 in its state.
discussion:
async initiate() {
this.title ||= await this.getTitleFromServerFunction();
}
async initiate({ forwarded }) {
this.title = forwarded.title || await this.getTitleFromServerFunction();
}
Refactor the node lookup inside rerender to instead pass the next nodes as parameters to the function
There is a comment indicating the lines in https://github.com/nullstack/nullstack/blob/master/client/rerender.js
Problem: I was trying to change an SVG of a star from stroke to filled when the user clicked on it, but even after the component rerenders, the SVG did not change.
I have created a repo with this bug for testing purposes. This is the ternary line on my code.
I also have added a gif to illustrate it. First I show that the normal ternary is working by hiding and showing Nulla-Chan. However, when I try to change the star icon by clicking it, nothing happens.
Applications should be able to start without a start function
Add project.locale
Page should be a proxy both on server and client that fallback page.locale to project.locale
This is useful for single language projects and should be de default in create-nullstack-app
Users should be able to create plugins that transform attributes of elements similar to the "route" and "bind" attributes which would allow creating things like VUE "if" directive
The plugin should respond to constructor/match/transform and receive an object with the scope, node, and depth keys.
Refer to https://github.com/nullstack/nullstack/tree/master/plugins for better examples
The API is still not decided but should be something in the likes of adding a Nullstack.use(Plugin) in the index.js
bind should work against undefined variables
default bind type should be string
maybe: params should no longer default to an empty string
this would allow:
<input bind={params.undefinedKey} />
Nullstack has a redundant feature that allows you to define secrets and settings by environment like:
settings.production.name = "Tinky Winky"
This was useful before Nullstack had proper environment support and could be deprecated now so the user can set secrets like:
secrets.name = environment.production ? "Tinky Winky" : "Dipsy"
Also the user will probably just use .env instead
Hints 1:
https://github.com/nullstack/nullstack/blob/master/server/configurable.js
All this could be deleted and replaced with simple objects. Freezing could become a simple Object.freeze.
Tests:
https://github.com/nullstack/nullstack/blob/master/tests/src/ContextSecrets.test.js
I want to remove unneeded features before i claim 1.0
Refactor the scope into a class for the client and one for the server exposing the instance key to the context.
The application should be able to call a component by key and access its public methods like:
prepare({instances}) {
instances.counter.count++;
}
This should add a new layer of freedom for plugin makers
router should be aware of the previous url for more semantic history.back()
The local context of the function should receive an attribute key with only the attributes passed to that node.
The spec is not decided yet but I suggest only renderable functions have access to attributes, and inner components have access only to the most specific attributes
class Component extends Nullstack {
renderInnerComponent({attributes}) {
return attributes.count;
}
render({attributes}) {
render (
<>
<h1> {attributes.title} </h1>
<div> {attributes.description} </div>
<InnerComponent count={1} />
</>
)
}
}
Em meus testes encontrei um problema com XSS
https://github.com/acneidert/null_xss
Basicamente ele está renderizando tags <script> no body
O que imagino de possível solução:
Converter caracteres especiais como ?, &, /, <,> E espaços para códigos HTML.
After linking the nullstack package and running one of it's commands,
it searches for current folder going directories above, but being linked it is always wrong
Steps to reproduce:
npm run start
/npm run build
thereI'm creating a project in Nullstack in Replit, but because the preview is in a secure link https, the ws of the framework gives an insecurity error
liveReload.js:16 Mixed Content: The page at 'https://[replit_project_name].[replit_user].repl.co/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://[replit_project_name].[replit_user].repl.co/'. This request has been blocked; this endpoint must be available over WSS.
Uncaught DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
a node that is null or undefined should generate a comment node just like false.
a node that is 0 should generate a string node with 0 as innerText
return null / undefined should skip rendering just like return false
NULLSTACK_SERVER_PORT is not working, however yarn start -p 3000 works
router.url = "http://...
" should cause a full redirect in both server and client
Examples:
Accessing nullstack.app/contributors in Github Pages
Should work equal than accessing nullstack.app/contributors/
Targets those issues registered on Github Pages side:
jekyll/jekyll#4440
https://stackoverflow.com/questions/33270605/github-pages-trailing-slashes
https://marcgg.com/blog/2016/03/14/github-pages-jekyll/
Nullstack is crashing in some macbooks because port 5000 is taken, should we move to port 3000 like normies or do something else?
ಥ_ಥ i liked 5000
When the project crashes on compile a erro screen should appear
This screen should maintain live reload
Dependencies that are only called on hydrate should be removed from the server bundle, because some people use browser globals without wrapping the scope on JavaScript packages, and we don't shame them enough
This is an edge case but when a project has no styles it crashes on load because of the changes made on serverless runner
Not sure where do ask
but there are any plan for make automatic forms with JSON ?
With the css for render, format for accept variables and
names for back-end process ?
Add support to type script on .nts files
To do this we pretty much only need to open a PR to vercel/vercel
. I already got started, but just want to make a successful deployment first to maybe help w/ the docs.
javascript files are being imported using relative paths, the publicPath should be "/"
example:
inside /model/1
using
await import('./dependency')
it will try to load from /model/1/1.client.js
instead of from /1.client.js
Project should have a getter with baseURL
if the domain is localhost it should include the server port as well
Suggested improvement:
A better description of error when not finding imported file.
Describing my experience to reach such a conclusion:
When I was working on my Nullstack project, I created a component and then changed the file and folder name of that component, but I forgot to modify the import for that component, thus generating an error in the application because it was not possible to import the component, and only thing printed on the terminal was:
💥️ There is an error preventing compilation in ./src/Application.njs
@ ./src/Application.njs 3:0-32 24:92-99
@ ./index.js
So I spent some time trying to figure out what this error was, it would be much more productive if the error thrown in the terminal pointed out that it was not possible to compile the program because it was not possible to import the given file
Steps to recreate the error:
I created a repository that exemplifies the error, just clone and run the project and you can check the error (repository). But to reproduce the error just:
Possible suggestion for improvement:
The error printed on the terminal could be clearer, it could be something like:
💥️ Module not found: Can't solve './Exemplo' in ./src/Application.njs
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.