enigmatic 0.9.14 → 0.9.15

package/readme.md

@@ -0,0 +1,99 @@
+<<<<<<< HEAD
+# enigmatic
+![version](https://d25lcipzij17d.cloudfront.net/badge.svg?id=js&type=6&v=0.8.5&x2=0)
+![size](http://img.badgesize.io/digplan/enigmatic/master/main.js)
+
+Enigmatic is a JavaScript micro-library for creating web applications using lightweight web components.
+It aspires to enable faster web app peformance, better reliabilty, and faster development process. 
+
+Enigmatic uses HTML attributes (directives) with a simple component model and data binding - all on existing HTML, JS, and CSS functionality.
+- No special tooling, compilation or preprocessing, or new languages to learn
+- Minimal JS and CSS core, includes basic components and two way data binding
+
+## Quick Start
+Just create an HTML page
+````
+<script src='//unpkg.com/enigmatic'></script>
+<link href='//unpkg.com/enigmatic.css' rel='stylesheet'>
+````
+
+## Enigmatic also includes some helpers
+````
+ window.$ -- $([body])[0] // Query Selector All
+ window.load -- ('mycontrol.js') // Load JS or CSS
+ Element.css -- e.css('color:red') // Add css to an element
+ Element.child -- body.child('span') // Add a child element
+ 
+````
+
+## window.data
+window.data is a single data object, that holds all the data for the app.  It's a JS object, with each key being an identifier, or *channel* to use with controls that have the data attribute.
+
+Controls interact with the data object to send and receive data, using a data attribute and .set() method.
+````
+<!-- Just use the *data* attribute
+<hellodata data='mykey'></hellodata>
+  
+window.data.set('mykey', 'Hello world!')
+````
+
+One may also create a simple counter, interacting with plain ole (non-control) HTML elements.
+In this example, the window.data object and control's data attribute take care of the binding.
+````
+<button onclick='data.count++'>Click me</button>
+<counter data='count'></counter>
+
+data.count = 0
+const counter = e =>
+  e.innerHTML = 'Ready'
+````
+=======
+# enigmatic
+[![npm version](https://badge.fury.io/js/enigmatic.svg)](https://badge.fury.io/js/enigmatic)
+
+
+Enigmatic is a JavaScript micro-library for creating web applications using lightweight web components.
+It aspires to enable faster web app peformance, better reliabilty, and faster development process. 
+
+Enigmatic uses HTML attributes (directives) with a simple component model and data binding - all on existing HTML, JS, and CSS functionality.
+- No special tooling, compilation or preprocessing, or new languages to learn
+- Minimal JS and CSS core, includes basic components and two way data binding
+
+## Quick Start
+Just create an HTML page
+````
+<script src='//unpkg.com/enigmatic'></script>
+<link href='//unpkg.com/enigmatic.css' rel='stylesheet'>
+````
+
+## Enigmatic also includes some helpers
+````
+ window.$ -- $([body])[0] // Query Selector All
+ window.load -- ('mycontrol.js') // Load JS or CSS
+ Element.css -- e.css('color:red') // Add css to an element
+ Element.child -- body.child('span') // Add a child element
+ 
+````
+
+## window.data
+window.data is a single data object, that holds all the data for the app.  It's a JS object, with each key being an identifier, or *channel* to use with controls that have the data attribute.
+
+Controls interact with the data object to send and receive data, using a data attribute and .set() method.
+````
+<!-- Just use the *data* attribute
+<hellodata data='mykey'></hellodata>
+  
+window.data.set('mykey', 'Hello world!')
+````
+
+One may also create a simple counter, interacting with plain ole (non-control) HTML elements.
+In this example, the window.data object and control's data attribute take care of the binding.
+````
+<button onclick='data.count++'>Click me</button>
+<counter data='count'></counter>
+
+data.count = 0
+const counter = e =>
+  e.innerHTML = 'Ready'
+````
+>>>>>>> 4f836882c656008703aad8afc30997772829f574

package/test.html

@@ -0,0 +1,176 @@
+<script src='index.js'></script>
+<script type='module' src='elements/index.mjs'></script>
+<link rel='stylesheet' href='index.css'>
+
+<body style='display: grid; place-items: center;'>
+    <test-runner></test-runner>
+</body>
+
+<script>
+    main = async () => {
+        const runner = $('test-runner')
+        const display = $('tr-display')
+        runner.createTests({
+            // dom
+            'Window exists': () => typeof window !== 'undefined',
+            'Document exists': () => typeof document !== 'undefined',
+            'Body exists': () => typeof document.body !== 'undefined',
+            // core js
+            'fetch exists': () => { return fetch },
+            'localStorage exists': () => { return localStorage },
+            // enigmatic core
+            '$ selector': () => { return $.name == 'bound querySelector' },
+            '$$ selector': () => { return $$.name == 'bound querySelectorAll' },
+            'window.loadJS': () => { return window.loadJS },
+            'window.loadCSS': () => { return window.loadCSS },
+            'window.data': () => { return window.data },
+            'window.data object': () => { return window.data._ },
+            'window.data set': () => { return window.data.set },
+            'window.wait': async () => {
+                return new Promise(async (r, j) => {
+                    const time = +new Date()
+                    await wait(100)
+                    const timetaken = +new Date() - time
+                    timetaken > 99 ? r(timetaken) : j(`Wait took ${timetaken}ms`)
+                })
+            },
+            'window.ready': () => { return window.ready },
+            // EE
+            'EnigmaticElement': () => { return EnigmaticElement },
+            'EnigmaticElement create': async () => {
+                return new Promise(async (r, j) => {
+                    const e = $('#trdisplay').child('e-e')
+                    e.id = 'testelement'
+                    e.innerHTML = '<h1>Hello e-e element</h1>'
+                    e.hide()
+                    e.show()
+                    e.setAttribute('data', 'mykey')
+                    r(e)
+                })
+            },
+            'EE-childHTML': () => {
+                const e = $('#trdisplay').childHTML('<span>Im a test</span>')
+                const ret = (e.innerHTML === '<span>Im a test</span>')
+                e.remove()
+                return ret
+            },
+            // Data
+            'window.data set': () => { return window.data.set },
+            'window.data.set(val)': () => { return window.data.set('mykey', 'myval') },
+            'Element data subscribe': () => { return $('#testelement').innerHTML === 'myval' },
+            // Custom elements
+            'Hello World element': async () => {
+                $('#testelement').remove()
+                return new Promise(async (r, j) => {
+                    const hw = $('#trdisplay').child('hello-world')
+                    await wait(500)
+                    $('hello-world').hide()
+                    await wait(500)
+                    $('hello-world').show()
+                    await wait(500)
+                    $('hello-world').hide()
+                    $('hello-world').remove()
+                    r(true)
+                })
+            },
+            'you-tube': async () => {
+                const r = $('#trdisplay').child('you-tube')
+                await wait(1500)
+                r.hide()
+                r.remove()
+                return r
+            },
+            'monaco-editor': async () => {
+                const r = $('#trdisplay').child('monaco-editor')
+                r.set('javascript', 'console.log(1)')
+                await wait(500)
+                await r.hide()
+                r.remove()
+                return r
+            },
+            'online-indicator': async () => {
+                const r = $('#trdisplay').child('online-indicator')
+                await wait(500)
+                if (navigator.onLine && r.innerHTML !== '🟢')
+                    throw Error('online-indicator not online')
+                runner.set('Disconnect your network connection to continue')
+                //await r.wentOffline()
+                if (!navigator.onLine && r.innerHTML !== '🔴')
+                    throw Error('online-indicator not offline')
+                runner.set('Connect your network connection to continue')
+                //await r.wentOnline()               
+                await r.hide()
+                r.remove()
+                return true
+            },
+            'font-awesome': async () => {
+                const r = $('#trdisplay').child('font-awesome')
+                r.set('fas fa-heart')
+                await wait(500)
+                r.set('fas fa-check')
+                await wait(1000)
+                const ret = getComputedStyle($('font-awesome')).fontFamily.match(/Font/i)
+                r.remove()
+                return ret
+            },
+            'view-panel': async () => {
+                const display = $('#trdisplay')
+                const vp = display.child('view-panel')
+                vp.classList.add('show')
+                vp.style.display = 'grid'
+                vp.style.gridTemplate = '1fr / 1fr'
+                const x = vp.child('e-e', 'one')
+                x.style.backgroundColor = 'red'
+                x.innerHTML = '!'
+                const xx = vp.child('div', 'two')
+                xx.style.backgroundColor = 'green'
+                xx.innerHTML = '!'
+                const xxx = vp.child('div', 'three')
+                xxx.style.backgroundColor = 'blue'
+                xxx.innerHTML = '!'
+                const b = display.child('button', 'four')
+                b.textContent = 'Show only one'
+                b.onclick = () => {
+                    vp.showOnly('#one')
+                }
+                const c = display.child('button', 'five')
+                c.textContent = 'Show all'
+                c.onclick = () => {
+                    vp.showAll()
+                    $('#one').hide()
+                }
+                await wait(500)
+                b.click()
+                await wait(500)
+                c.click()
+                await wait(500)
+                b.remove()
+                c.remove()
+                vp.remove()
+                return true
+            },
+            'side-menu': async () => {
+                $('#trdisplay').childHTML(`
+                    <button id='opener' onclick="$('#me').toggle()" style='position: absolute; left: 400px'>Open</button>
+                    <side-menu id='me' toggle-classes='slide-in slide-out'>
+                        <li class=''>
+                            <font-awesome class='fa fa-check'></font-awesome> one
+                        </li>
+                        <li class=''>
+                            <font-awesome class='fa fa-check'></font-awesome> one
+                        </li>
+                        <li class=''>
+                            <font-awesome class='fa fa-check'></font-awesome> one
+                        </li>
+                        <li class=''>
+                            <font-awesome class='fa fa-check'></font-awesome> one
+                        </li>
+                        <li class=''>
+                            <font-awesome class='fa fa-check'></font-awesome> one
+                        </li>
+                    </side-menu>`)
+                return true
+            }
+        })
+    }
+</script>

package/sw-nouse.js

@@ -1,22 +0,0 @@
-self.addEventListener('install', event => {
-    console.log('V1 installing…');
-
-    // cache a cat SVG
-    event.waitUntil(
-        caches.open('static-v1').then(cache => cache.add('/index.js'))
-    );
-});
-
-self.addEventListener('activate', event => {
-    console.log('V1 now ready to handle fetches!');
-});
-
-self.addEventListener('fetch', event => {
-    const url = new URL(event.request.url);
-
-    // serve the cat SVG from the cache if the request is
-    // same-origin and the path is '/dog.svg'
-    if (url.origin == location.origin && url.pathname == '/index.js') {
-        event.respondWith(caches.match('/index.js'));
-    }
-});