bjatkin / kissjs Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 20.41 MB

A super simple (no like REALLY super simple) js framework

Go 49.50% HTML 20.44% JavaScript 2.28% CSS 27.66% TypeScript 0.12%

kissjs's People

Contributors

Watchers

kissjs's Issues

Component keyword to Comp

the use of the component keyword is a little verbose. Using comp instead would be more terse and still clear. we could also use the syntax cp though that might be too short.

<component tag="test" src="the_src.html"></component>
// vs
<comp tag="test" src="the_src.html"></comp>
// vs
<cp tag="test" src="the_src.html"></cp>

Inline component defs cause crash

When defining and using anonymous components (e.g. components without a source) the compiler crashes.

<!DOCTYPE html>
<html>
    <body>
        <comp test="test">
            <div></div>
        </comp>

        <test top="500px"></test>
        <test top="250px"></test>
    </body>
</html>

this should produce the following

<html>
    <body>
        <div></div>
        <div></div>
    </body>
</html>

instead you end up with a crash

panic: runtime error: invalid memory address or nil pointer dereference

Unset attributes in components should be set to blank

Currently attributes which are unset by the component remain in the final view.

<component tag="comp">
    <p>{test}</p>
    <p>{test2}</p>
</component>

<comp test="hello world"></comp>

will be rendered to

<p>hello world</p>
<p>{test2}</p>

rather than

<p>hello world</p>
<p></p>

The second option seems more intuitive and more useful.

css fails on @keyframes and url functions

kiss does not correctly compile css code when the css includes @Keyframes and url functions

@keyframes move {
    0% {
        left: 1000px;
    }

    100% {
        left: 0px;
    }
}

produces this when compiled

@keyframes.k-Dsc2WD move.k-Dsc2WD {
    0% {
        left: 1000px;
    }

    100%.k-Dsc2WD {
        left: 0px;
    }

@Keyframes and move should not have a class applied to them and neither for the 100% value.

also when using the following

  .dropimage {
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4x ... vZz48L3N2Zz4=)
    }

the compiler throws an error.

There was an error parsing the structure: css style does not contain both a key and value. Expecting key and value split by ':'

this should also not happen as the url function is valid css

@keyframes css animations are being duplicated when inside components

css rules are automatically duplicated when they are instanced multiple times in a document. While this is not very optimized it works because each rule has a specific class applied to it

div.k-asd34 {
   ...
}

div.k-54dhc {
   ...
}

however keyframe animations are also being duplicated. These animations are not class scoped and therefor should not be duplicated.

@keyfram anim {
   ...
}

@keyframe anim {
   ...
}

kiss class is being added when not nessisary

currently the kiss class k-###### will be added to every element in a component, this is done so that the CSS rules can be correctly scoped. The kiss class will be different for each instance of the component so in the case that the css rules contain parameters the scoping is not broken. However, currently, even components with no style attributes still get unique kiss classes.

for example:

<comp tag="test"><p>{label}</p></comp>

<test label="hello">
<test label="world">

produces:

<p class="k-54Ffjd">hello</p>
<p class="k-Bg04ll">world</p>

but should produce:

<p>hello</p>
<p>world</p>

which would be better as there is no css to scope and it decrease the size of index.html

Additionally were are adding unique classes per component instance even when we could just add a unique class per component because the style information does not change. Doing this will help reduce the size of bundle.css and index.html and will also help to improve performance as css rules will not be unnecessarily duplicated.

for example:

<comp tag="test">
    <style>
        p {color: white;}
    </style>

<p>{label}</p>
</comp>

<test label="hello">
<test label="world">

produces:

// bundle.css
p.k-54Ffid { color: white; }
p.k-Bg04ll { color: white; }

// index.html
<p class="k-54Ffid">hello</p>
<p class="k-Bg04ll">world</p>

but should produce:

// bundle.css
p.k-85Fd2f { color: white; }

// index.html
<p class="k-85Fd2f">hello</p>
<p class="k-85Fd2f">world</p>

hr attributes missing

hr tags that have attributes are not keeping those attributes after being compiled.

for example

<hr style="margin: 10px;">

should compile to

<hr style="margin: 10px;">

but instead complies to

<hr>

&& is not handled correctly by js parser

Lines ending with && are not being handled correctly by the js parse

if (!currentSection.children[i].checkValidity !== undefined && 
    !currentSection.children[i].checkValidity()) {
    return 
 }

is compiled to

if(!currentSection.children[i].checkValidity!==undefined&&;!currentSection.children[i].checkValidity()){return}

notice the && is followed by a ; which leads to an error

this can be worked around for now by changing all conditions to be on the same line

if (!currentSection.children[i].checkValidity !== undefined &&  !currentSection.children[i].checkValidity()) {
    return 
 }

set default values for components

It might be nice to have a way to set default values for component parameters.

<comp tag="test">
    <p>hello {who}</p>
</comp>

<test></test>

<test who="developer"></test>

in the above example you will end up with the following output

<p>hello</p>
<p>hello developer</p>

it might be nice to be able to specify a default value for who so that rather than setting who to blank you could provide a value like 'world'.

adding this default would instead produce the following

<p>hello world</p>
<p>hello developer</p>

Instanced component not working when passed as component

When an instance component is passed as an attribute it will fail to render in and so will not get templated.

<popup title="test" href="https://github.com">
    <content>
        <component src="projects/test.html"></component>
    </content>
</popup>

here the projects/test component will not render into the popup component however, title will work correctly.

<popup title="test" href="https://github.com">
    <content>
        <p>TEST</p>
        <component src="projects/test.html"></component>
    </content>
</popup>

however in this case both test and the component will be rendered into the popup.

Globals are not global

Currently if a globals file is included as a parameter to the KISS compiler the values are only applied to the base view. This seems counter intuitive as global implies that the values should be globally available. This would be especially useful to replace things like environment variables with configuration files which seems preferable.

CSS selectors are not being parsed correctly when separated by commas

when using comma separated selection elements lexing does not work correctly.

html,body {
    ....
}

should produce

{ html, } { body, } { { } ... { } }

but instead it produces

{ h } { t } { m } { l } { , } { b } { o } { d } { y } { { }  ... { } }

Error when dir is deep

Currently the output directory and files are automatically created if the non-exsistant dir is only one directory deep. However if it's any deeper then an error is thrown.

for example if the directory structure is

home
    | pages
    | comps
    login.html

and I set the output directory to "pages/login" the login directory will be created and the index and bundle files will be successfully placed inside.

however if I set the output directory to "pages/dist1/dist2" neither dis1 nor dis2 folder will be created and I get the following error

There was an error writing the output files, open pages/dist1/dist2/bundle.css: no such file or directory

@media queries are not currently supported by the system

currently @media queries are not correctly lexed or parsed. Given the importance of media queries in modern web design the KISS compiler should support these

How to handle attributes like disabled or required

Currently there is no good way to handle passing attributes like disabled or required into components. Perhaps these should just be passed by there name as shown below

<comp tag="test">
    <input type="text" {disabled}>
</comp>

<test disabled></test>
<test></test>

here the first instance of test would pass disabled on and the input would be disabled
the second instance however would not pass on the disabled attribute so it would not be disabled

Add conditional rendering

there are some cases where it would be nice to only render portions of a component if a specific attribute is provided.

for example

<comp tag="icon_btn">
    <button>
        <label:p>{label}</p>
        <icon:span>{icon}</span>
    </button>
</comp>

<icon_btn lable="no icon"></icon_btn>

<icon_btn>
    <icon>
        <svg ... > ... </svg>
    <icon>
</icon_btn>

would produce

<button>
    <p>no icon</p>
</button>

<button>
    <span> <svg ... > ... </svg> </span>
</button>

This could help make code clearer and could lead to cleaner html rendered code.

Default value when attribute is unset

It might be nice to set a default value for a components attribute when it's not set. One possible options for this would be to set the value to be the same as the key.

for example the code

<comp tag="test">
    <p>hello {who}</p>
    <button class="{wide}">say hello</button>
</comp>

<test world></test>
<test wide></test>

would produce

<p>hello world</p>
<button>say hello</button>

<p>hello</p>
<button class="wide"></button>

Type Script support

Currently kiss supports coding in JS only, if TS was also supported it would make working with TS much easer as kiss handles the bundling nicely. This could also allow the use of TS inside components which would be nice. It also seems like it wouldn't require much effort as unlike javascript you don't have to worry about the semi-colon problem and TS files have a more definite import syntax.

add default attribute/ parameter for simple components

for simple components it might be nice to have a default param so that components can feel more like normal html

for example currently for simple components the required syntax is

<comp tag="chip" src="chip.html"></comp>

<chip label="CSS3"></chip>
<chip label="HTML"></chip>

it might be nicer to be able to simply write

<comp tag="chip" src="chip.html"></comp>

<chip>CSS3</chip>
<chip>HTML</chip>

you could achieve this by providing a default attribute when a component only has a single child and chip.html could change from

<style>
    div {
        border: 2px solid black;
        border-radius: 25px;
     }
</style>

<div>{label}</div>

<style>
    div {
        border: 2px solid black;
        border-radius: 25px;
     }
</style>

<div>{default}</div>

we would need to decide if default can ever get set by attributes or if that should throw an error

<chip default="error?"></chip>

also, this would likely take some retooling if we want this type of thing to work for anything other than a simple text node

<chip>
     <span style="color: red;">
         how does this work?
    </span>
</chip>

<chip>
    <hr>
    or what about this?
    <hr>
</chip>

perhaps this is too much work for too little benefit and it's possible that this could become confusing or frustrating rather than helpful.

bjatkin / kissjs Goto Github PK

kissjs's People

Contributors

Watchers

kissjs's Issues

Recommend Projects

Recommend Topics

Recommend Org