grossacasac / dom99 Goto Github PK

In dom99ES.min.js undefined is

sometimes written void 0, sometimes undefined

See plans: https://github.com/GrosSacASac/DOM99/blob/master/CONTRIBUTING.md

"Create a better documentation experience"

Also translations

Add meta tags to docuentation/documentation-original.html
and docuentation/index-original.html

Production minified dom99Script.es5.min.js
should be Production minified dom99.iife.es5.min.js

inside defaultOptions.js

https://micro-frontends.org/

the core lib is not enough
it does not include any language by default
highlightjs/highlight.js#1665

fast solution would be to import highlightjs + necessary language highlighting, initialize it then export it,
and include that file instead

better would be to fix the issue in the main repo

simplifies the code but is a breaking change

One way would be to be able to provide a custom removeNode function

const removeNode = (node) => {
    if (node.nodeType === 1) {
    node.animate([
        // keyframes
        { transform: 'translateY(0px)' },
        { transform: 'translateY(-300px)' }
      ], {
        // timing options
        duration: 20000,
        iterations: 1
      }).finished.then(function () {
          node.remove();
      });
    } else {
        node.remove()
    }
};

Feed ['f', 'x'] then
When ['x', 'f'] is fed on a data-list element, both child are updated
What could happen instead is that the first element is moved.
One way to do it is to enhance data with identity keys, another would be to search for identity.

• on how to run the tests
• how to build files

npm run buildAll

result

> babel polyfills/remove.js > polyfills/built/remove.js && babel polyfills/dom-hidden.js > polyfills/built/dom-hidden.js

The system cannot find the path specified.

happens because polyfills/built/ was removed

now it is <script src="node_modules/dom99/js/dom99.js"></script>

And make sure these files are generated in the build

npm run jsdoc should create the file documentation/dom99.js.html
File is ignored by git but still used for website and is missing

• To avoid confusion #6 #8
• To remove noise in the commits

Make sure generated files are still included in npm publish and documentation files are included before publishing site to now.
Make a commit to delete these files first.

To ignore:

• everything in built/
• documentation/documentation.html
• documentation/index.html
• documentation/global.html
• documentation/dom99.js.html
• documentation/js/documentation.es5.min.js
• examples/js/built
• examples/js/builtes5
• components/yesNoDialog/examples/js/built

including data-function data-variable etc
plugins have at least 3 functions: start, run, end
they should have access to the shared state of the singleton

https://github.com/GrosSacASac/DOM99/blob/master/documentation/presentation.txt

is already in presentation,
remove file

https://github.com/GrosSacASac/3D-realtime-editor-proof-of-concept/tree/next
on branche next

documentation-original.html

https://github.com/GrosSacASac/DOM99/blob/master/documentation/documentation-original.html#L13
https://github.com/GrosSacASac/DOM99/blob/master/documentation/documentation-original.html#L14

Highlightjs should be included as a dev dependency and served from local files. Same for css

This is already the case for polyfill https://github.com/GrosSacASac/DOM99/blob/master/documentation/documentation-original.html#L996
The files should be copied so that we can serve the documentation/ folder directly like here
https://github.com/GrosSacASac/DOM99/blob/master/tools/prepareSite.js#L13

Problem: Using deprecated package. More info https://babeljs.io/docs/en/babel-polyfill

Proposed solution: Replace all usage of @babel/polyfill in the repo with:
core-js/stable and regenerator-runtime/runtime.

Split tag name and variable name. Given this template

<template data-template="d-todo">
    <li class="todo-item">
        ...
    </li>
</template>

Change

<ul data-list="allToDos-d-todo"></ul>

into

<ul data-list="allToDos" data-list-item="d-todo"></ul>

investigate why both cases are different sometimes

d.feed(
    d.scopeFromArray([scope, 'x']),
    x
);

d.feed(
    scope,
    {x}
);

The html files are already generated from documentation/documentation-original.html
and documentation/index-original.html

with
https://github.com/GrosSacASac/DOM99/blob/master/tools/buildHTML.js

Read from package.json description and keywords
use .replace() before this line
https://github.com/GrosSacASac/DOM99/blob/master/tools/buildHTML.js#L60

Replace something unique like DESCRIPTION placeholder.

import d from "../node_modules/dom99/built/dom99Module.es5.js";
import {yesNoDialog, textDialog} from "../node_modules/dom99/components/yesNoDialog/yesNoDialog.js";

can result in a build that imports dom99 twice, because yesNoDialog.js itself is a module that imports
dom99Module.js but not dom99Module.es5.js

Temporary consumer workaround import d from "../node_modules/dom99/built/dom99Module.js"; everywhere and transpile the bundle yourself

Potential solutions: make yesNoDialog use dependency injection

#12

jsfiddle needs to be updated as well, because it relied on files from git

WARN! Your project is missing a now.json file with a version property. More: https://zeit.co/docs/version-config
WARN! You are using an old version of the Now Platform. More: https://zeit.co/docs/v1-upgrade

inside notifyRawListSubscriber warn if listItemTagName is undefined
it probably means there was a typo inside data-list
or the <template> with this name does not exist

https://github.com/GrosSacASac/DOM99/blob/master/tests/specification/spec/dom99.js

Most of the features are not covered by tests, increase general test coverage

use well defined Object.prototype https://github.com/GrosSacASac/DOM99/blob/master/source/defaultOptions.js#L10

Some things are out of date

One of the strength of this framework is the mapping between graphs (variables) and DOM.

Everything has to be done manually.

Create a tool that takes example JSON and outputs example HTML, the result could then be added directly or configured with extra structure and styling.

For example given

[
        {
            picture: "./images/boss.jpg",
            bio: "Loves biking and skating"
        },
        {
            picture: "./images/sister.jpg",
            bio: "Drinks tons of café."
        }
]

output could be

    <template data-template="user-element">
            <img data-variable="picture" alt="user-picture" class="user-picture">
            <p data-variable="bio" class="user-bio">SHORT BIO</p>
    </template>


    <div data-list="users-user-element"></div>

then after adding it to html d.feed({users: exampleGraph}); would just work

See other examples at https://dom99.now.sh/documentation#examples1

.value works fine for single value select. But only shows the first one for select multiple

Use selectedOptions property.

https://dom99.now.sh/global.html is not linked inside https://dom99.now.sh/documentation

Add syntax colors for code examples in the doc.

https://dom99.now.sh/documentation#examples1

After documentation is ready, and test coverage at least 80%

https://github.com/microjs/microjs.com

data-inside="context" , scope, context, components

All these are used seemingly randomly throughout the documentation and the code.

Decide which one is more appropriate and stick to it.

https://github.com/GrosSacASac/DOM99/blob/master/documentation/index-original.html#L183

it should be on <img>

Each time build is run it goes one level deeper, it is a problem because these files are published with npm

The tests are run locally and manually.

See SpecRunner.html in https://github.com/GrosSacASac/DOM99/tree/master/tests/specification

Ideally tests are run on every commit. They should run on browser environment. It should still be possible to run tests locally with any browser.

Run lighthouse test or similar on https://dom99.now.sh/

The text contrast between foreground and background should be WAI AAA