Event listeners breaking when having multiple of them:
Outputs error
TypeError: Argument 2 of EventTarget.addEventListener is not an object.

We expect it to listen for all types of events

Components api should be also accessible from the component templates

Making router paths into objects would be a great addition to the framework but also not neccessary.

I think it would be great to have template litelars
since i want making web applications to be as easy as possible.

Load html files and make them renderable

add a7.css and output the minified css file there and a7.init() will load that and push it up to the document head or alternatively add another file which the minified css will go to.

purePath is a function currently inside A7JS compiler and currently it is making its way out to other parts of the framework.

Whats wrong?

When we input /dir/dir2/../ we expect to get back /dir/ but instead of that we get /dir/dir2/../

$ a7 devserver
WARN Your configuration file seems empty, we are going to set it to the defaults.
C:\Users\tapio\OneDrive - Tampereen seudun toisen asteen koulutus\Projektityö\a7JS\cli\updater.js:31
if(ver.isNewer("4.0.0", pk.a7js.metadata.lastUsedVersion)){
^

TypeError: Cannot read property 'metadata' of undefined
at Object. (C:\Users\tapio\OneDrive - Tampereen seudun toisen asteen koulutus\Projektityö\a7JS\cli\updater.js:31:33)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object. (C:\Users\tapio\OneDrive - Tampereen seudun toisen asteen koulutus\Projektityö\a7JS\cli\cli.js:8:1)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)

We are working on implementing source maps.
Since we are bundling multiple files we cant rely on premade solutions offered by UglifyJS,

basicly all the source files is an array so we basicly can join them but have to increment the source file by one and so on.....

vql parsing library https://github.com/Rich-Harris/vlq
or i could make my own vql parser, but is it worth it?

anyways it is not that complex as it seems first but it is definedly gonna be pain in the ass to implement that.

this would probably be a feature in 4.1.0 since it is only a nice to have.

Ive found some problems with some of the systems that we've got in place, quite easy to fix but also time consuming.

"global" and component specific variables should be a part of the fix

There is no way to make links work if you add them to the DOM in the trigger phase.

I find it problematic to write tests that if config value is set.

The way to fix it would be to load default config and then the config that is on the root of the project over rides the settings of the default config.

For example

here is an example on how to make it

it combines both of them and the feature is from es6.

as im currently trying to implement it to validate it at run time, i should instead validate it at build time.

it would be cool to render elements into the index file also, since modules are so handy and easy to use!

Problem

I've noticed that when adding new component import to the application and while you have a development server running, it may crash the development server since JavaScript minifiers like UglifyJS wont understand the import because our own scripts detect them only and handle the bundling.

Solution

by automatically importing the module when the create command is fired we don't have to care about this issue.

the way that we currently parse the components is basicly setting them by innerHTML, from what ive red it can be slow at times.

Front End Core

moving them from this "old" innerHTML purely into a documentFragment would actually achieve better performance.
and it would also be easier to manage on the frontend framework core no need to parse objects to html attributes (which is actually roughly 20% of the frontend core since it has not been done with regExp).

Building and parsing

How ever parsing the component HTML template to that createElement format is another thing, a good thing is that the component declarations are automaticly parsed to a7.createElement way.

That code would also look really much like React createElement.

Event Listener support

And another benefit from this would be getting the eventListeners actually working.

Relevant Issues:

#26
#8

Done

Bug happening when wanting to render new links.
console gets filled with link is not defined.

The problem is that the build script right now pretty is very much like spagetti code.
Id like to rewrite some parts of it so that it could be understood clearly, to make improvements to the build script.

Also cleaning it up will help alot!

I feel like objects are not the way to go in the way that they are used right now.
It is gonna be hard if it would have bunch of properties, i just feel like onRoute should be the way to go for the whole object since functions are easier to write than objects.

So with the way we have it currently setup: CSS gets split into two different groups. The ones that affect the containing element and the ones that are inside it.

It works as intended until you name your classes for elements inside the component container with class names that contains the component name so the system gets tricked and then your css does not work.

We found an issue revolving around loading the component.txt file and it now has been fixed.

Also we are releasing 5.0.0-alpha soon!

currently plain text does not work with the new createElement

probably gonna make it hybrid of changing the html inside the html

Since the library is not really safe by default we would like to make it more safer.
We cant exactly make it 100% safe but atleast we can make it safer.

I had an idea to deprecate html attributes such as onload, onerror because we allready can do it in javascript and the dom would not look that great if a element would have onclick and onhover etc...

older browser do not support fetch

Allowing CSS bundling would make file transfers really quick.

And could also possibly make the gzipped file also much smaller

So i have an idea on altering all of the rendering into a different system.
make the render function internal into the router and then lets make it so that you could add animations to them.

devserver crashes because server tries to load a folder as a static file

It is an essential feature on modern websites to have hamburger menus at least on mobile

Static site generators

a neccessary feature

aiming for 5.0

it all to do with link rendering

a7.renderNewLink() etc....

add the component selector to all of the component internal css so that the css would not affect the styles that are out of the component scope.

Also i think all of the styles should be moved to the style that we insertInto the documentHead with a7.loadCSS method because styletags for each component would sort of be dumb since they can make the site also slower because a higher dom size and a higher render time.

Block iframing by default

When firing the following command

$ a7 nc home

It should create a folder with boilerplate but it returns the following error

internal/fs/utils.js:525
throw new ERR_INVALID_ARG_TYPE(propName, ['string', 'Buffer', 'URL'], path);
^

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be one of type string, Buffer, or URL. Received type undefined
at Object.openSync (fs.js:432:10)
at Object.readFileSync (fs.js:342:35)
at Object.getImports (...\a7JS\cli\cli-modules\cli-core.js:41:25)
at a7createComponent (...\a7JS\cli\cli.js:111:25)
at Object. (...\a7JS\cli\cli.js:216:9)
at Module._compile (internal/modules/cjs/loader.js:956:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
at Module.load (internal/modules/cjs/loader.js:812:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10) {
code: 'ERR_INVALID_ARG_TYPE'
}

Reactivity finally yes!

we do not have reactivity yet implemented in the framework.
i would want to finish this feature within this year and ship version 4.1.0 with it!

add JSON.parse optimization to the javascript compiler

Embed render new links into the router, because it is also more cost efficient since trying to find strings of text is faster than traversing the dom.

Removing return({...})

a7js components aren't the most beautiful looking when you create a new one, so i would like to remove the return({...}) completely from our components.
mostly because it is not a thing that we need.

Rename components

and renaming all component files from
filename.js to filename.a7.js because then it would be more clear that the file in question is a a7js component

Cheers

no worries you dont have to do this manually we will also offer a tool to convert old code to the new format 😄
hopefully everyone is happy for this change

• anton7r

Add compression and optimization to dev server and fix bugs that will make the server crash.

In safe props mode remove script tags.

encapsulate production code inside es5 frontend module

Auto init package.json with atleast some options such as dependencies.

would make build times alot faster...
and since it is on install no additional steps would be required.

We need better documentation!!

A7JS is not well enough documented

add onEvent listeners on a7.createElement()

event listeners are a core factor in javascript in general so onEvent listeners would be a great addon to the framework!