nullstack / nullstack Goto Github PK

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?

Add support to type script on .nts files

NULLSTACK_SERVER_PORT is not working, however yarn start -p 3000 works

Web app manifest should have the filename extension 'webmanifest'.

This issue will at least touch:

• server/manifest.js
• server/server.js
• server/template.js
• worker/staticInstall.js
• worker/dynamicInstall.js

The documentation about how to generate manifest.json should be updated to manifest.webmanifest

'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.

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

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 ?

To be defined, but the main goal is to work easily on Lambda and Vercel out of the box

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

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

router should be aware of the previous url for more semantic history.back()

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.

When the project crashes on compile a erro screen should appear
This screen should maintain live reload

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);
  }
}

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

I got some errors in the node-sass dependency install. This error happens on node 15.14.0 but works well with the LTS version(14.16.1)

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.

Project should have a getter with baseURL

if the domain is localhost it should include the server port as well

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

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:

• link this package to a new Nullstack project
• run one of: npm run start/npm run build there
• shows error of directory not found (looking levels above the real, following fixed path)

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:

1. Create a Nullstack Component
2. Import this component to some file, but with wrong import path

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

Make in project root a webpack config.

must has a function that call the builder code, like this:

nullstackWebpack({ Options })

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

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

router.url = "http://..." should cause a full redirect in both server and client

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

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

• https://github.com/nullstack/nullstack/blob/master/server/template.js
• https://github.com/nullstack/nullstack/blob/master/server/project.js
• https://github.com/nullstack/nullstack/blob/master/tests/src/ContextProject.njs

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/

Whenever I try to refresh a page, it causes Firefox to reload infinity times, but this only happens on firefox. I have tried on Microsoft Edge and Google Chrome and on both it works just fine.

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

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

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:

• the forward could be any object including nested keys
• The forward keyword could be something else like model, state, instance and so on, please make suggestions.
• Should it add state to all deep matched routes?
• I suggest the lifecycle still runs normally but the user can skip unnecessary functions with the new ||= operator:

async initiate() {
   this.title ||= await this.getTitleFromServerFunction();  
}

• It could be attached to the context on every component in the next render cycle instead of autoloaded into the state:

async initiate({ forwarded }) {
   this.title = forwarded.title || await this.getTitleFromServerFunction();  
}

This is an edge case but when a project has no styles it crashes on load because of the changes made on serverless runner

Applications should be able to start without a start function

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?

I'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.

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)

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.

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.

For convenience, it'd be cool to be able to choose the dev server port without resorting to the .env file.

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

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

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} />

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.

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} />
      </>
    )
  }

}

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

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

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.

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.