jails-js 5.9.0 → 6.0.0

package/src/utils/index.ts

@@ -1,5 +1,10 @@
+
 const textarea = document.createElement('textarea')
 
+export const g = {
+	scope: {}
+}
+
 export const decodeHTML = (text) => {
 	textarea.innerHTML = text
 	return textarea.value
@@ -13,36 +18,17 @@ export const rAF = (fn) => {
 }
 
 export const uuid = () => {
-	return 'xxxxxxxx'.replace(/[xy]/g, (c) => {
-		const r = Math.random() * 8 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8)
-		return v.toString(8)
-	})
+	return Math.random().toString(36).substring(2, 9)
 }
 
 export const dup = (o) => {
 	return JSON.parse(JSON.stringify(o))
 }
 
-// http://crockford.com/javascript/memory/leak.html
-export const purge = (d) => {
-	var a = d.attributes, i, l, n
-	if (a) {
-		for (i = a.length - 1; i >= 0; i -= 1) {
-			n = a[i].name
-			if (typeof d[n] === 'function') {
-				d[n] = null
-			}
-		}
-	}
-	a = d.childNodes
-	if (a) {
-		l = a.length
-		for (i = 0; i < l; i += 1) {
-			purge(d.childNodes[i])
-		}
-	}
-}
-
 export const safe = (execute, val) => {
-	try{return execute()}catch(err){return val || ''}
+	try{
+		return execute()
+	}catch(err){
+		return val || ''
+	}
 }

package/src/utils/pubsub.ts

@@ -1,3 +1,4 @@
+
 const topics: any = {}
 const _async: any = {}
 
@@ -17,4 +18,3 @@ export const subscribe = (name, method) => {
 		topics[name] = topics[name].filter( fn => fn != method )
 	}
 }
-

package/tsconfig.json

@@ -1,5 +1,8 @@
 {
   "compilerOptions": {
+		"declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
     /* Visit https://aka.ms/tsconfig to read more about this file */
 
     /* Projects */

package/types.d.ts

@@ -0,0 +1,47 @@
+type EventCallback = ( Event: Event, data?:any ) => void
+
+export declare const templateConfig: (options: any) => void;
+export declare const register: (name: string, module: Module, dependencies?: any) => void
+export declare const start: (target?: HTMLElement) => void;
+export declare const subscribe:( subject: string, callback: (data:any) => void ) => Function
+export declare const publish: ( subject: string, data :any ) => void
+
+export type Component = {
+
+	elm: HTMLElement
+	dependencies: any
+
+	state : {
+		protected( props: Array<string> ): Array<string>
+		set( data: object ) : Promise<any>
+		set( callback: ( state: object ) => any ) : Promise<any>
+		get() : object
+		getRaw() : object
+	}
+
+	main( mainArgs: ( t: Component ) => void ): void
+
+	publish( name: string, value: any ) : void
+
+	subscribe( name: string, value: Function ) : Function
+
+	unmount( callback: () => void ) : void
+
+	on( eventName: string, selector: string | EventCallback, callback?: EventCallback ): void
+
+	emit( eventName: string, data: any ) : void
+
+	off( eventName: string, callback: () => void ): void
+
+	trigger( eventName: string, selector :string, data: any ): void
+
+	innerHTML( target: HTMLElement | string, html?: string ) : void
+}
+
+export type Model = {
+	[key: string] : object
+}
+
+export type View = ( state: object ) => object
+
+export type Template = ({ elm: HTMLElement, children: string }) => string

package/vite.config.ts

@@ -9,8 +9,10 @@ export default defineConfig({
 		lib: {
 			name: 'jails',
 			entry: path.resolve('src', 'index.ts'),
-			formats: ['umd'],
-			fileName: format => `jails.js`
+			formats: ['umd', 'es'],
+			fileName: (format) => {
+				return format == 'umd'? 'jails.js': 'index.js'
+			}
 		},
 		rollupOptions: {
 			output: {

package/index.d.ts

@@ -1,65 +0,0 @@
-type EventCallback = ( Event: Event, data?:any ) => void
-
-declare const html = ( value :string ) => string
-
-declare const _default: {
-	publish( subject: string, data :any )
-	subscribe( subject: string, callback: ((data: any ) => void) )
-    register(name: string, module: Module, dependencies?: any): void
-    start( target?:Element): void
-	templateConfig( options: any ): void
-}
-
-export default _default
-export const html
-
-export type Module = {
-	default: ((component:Component) => Promise<void> | void )
-	Model?: Model
-	View?: View
-}
-
-export type Component = {
-
-	elm: HTMLElement
-	dependencies: any
-
-	state : {
-		set( data: object ) : Promise
-		set( callback: ( state: object ) => any ) : Promise
-		get() : object
-		getRaw() : object
-	}
-
-	main( mainArgs: ( t: Component ) => Array<Function> | void ): void
-
-	publish( name: string, value: any ) : void
-
-	subscribe( name: string, value: Function ) : Function
-
-	template( data: object ) : void
-
-	unmount( callback: () => void ) : void
-
-	onupdate( callback: () => void ) : void
-
-	on( eventName: string, selector: string | EventCallback, callback?: EventCallback ): void
-
-	emit( eventName: string, data: any ) : void
-
-	off( eventName: string, callback: () => void ): void
-
-	trigger( eventName: string, selector :string, data: any ): void
-
-	render( data: object ) : void
-
-	innerHTML( target: HTMLElement | string, html: string? ) : void
-}
-
-export type Model = {
-	[key: string] : object
-}
-
-export type View = ( state: object ) => object
-
-

package/logo.svg

@@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="71px" height="72px" viewBox="0 0 71 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
-    <title>logo</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="linearGradient-1">
-            <stop stop-color="#2D388A" offset="0%"></stop>
-            <stop stop-color="#00AEEF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="linearGradient-2">
-            <stop stop-color="#2D388A" offset="0%"></stop>
-            <stop stop-color="#00AEEF" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="logo" fill-rule="nonzero">
-            <g id="SvgjsG1008">
-                <g id="SvgjsG1009">
-                    <g id="Group" transform="translate(0.194727, 0.886526)">
-                        <path d="M0.244508781,35.2445089 L8.13267043,43.1877401 L43.1348733,7.94543398 L35.2445088,0.00220278181 L0.244508781,35.2445089 Z M8.13267043,41.6259678 L1.79746995,35.2445089 L35.2445089,1.56397508 L41.5819122,7.94543398 L8.13267043,41.6259678 Z" id="Shape" fill="url(#linearGradient-1)"></path>
-                        <path d="M13.800428,48.8951478 L21.6907925,56.8361762 L56.6885898,21.5938701 L48.7982254,13.6506389 L13.800428,48.8951478 Z M21.6907925,55.2744039 L15.3533892,48.8951478 L48.7982254,15.2124112 L55.1356286,21.5938701 L21.6907925,55.2744039 Z" id="Shape" fill="url(#linearGradient-2)"></path>
-                        <path d="M70.244509,35.2445089 L62.3563474,27.3034805 L27.3541445,62.5457866 L35.2445089,70.4890178 L70.244509,35.2445089 Z M62.3563474,28.86305 L68.6915479,35.2445089 L35.2445089,68.9272455 L28.9071057,62.5457866 L62.3563474,28.86305 Z" id="Shape" fill="url(#linearGradient-1)"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

package/src/transpile.ts

@@ -1,79 +0,0 @@
-import { uuid } from './utils'
-
-const parser = new DOMParser()
-
-export default function Transpile(html, config) {
-
-	const regexTags = new RegExp(`\\${config.tags[0]}(.+?)\\${config.tags[1]}`, 'g')
-	const virtual = parser.parseFromString(html.replace(/<\/?template[^>]*>/g, ''), 'text/html')
-
-	virtual.querySelectorAll('[html-for], [html-if], [html-inner], [html-class], [html-model]').forEach((element) => {
-
-		const htmlForeach = element.getAttribute('html-foreach')
-		const htmlFor 	= element.getAttribute('html-for')
-		const htmlIf 	= element.getAttribute('html-if')
-		const htmlInner = element.getAttribute('html-inner')
-		const htmlClass = element.getAttribute('html-class')
-		const forEachInstruction = htmlFor || htmlForeach
-
-		if ( forEachInstruction ) {
-			const selector = htmlFor? 'html-for': 'html-foreach'
-			const split = forEachInstruction.match(/(.*)\sin\s(.*)/) || ''
-			const varname = split[1]
-			const object = split[2]
-
-			element.removeAttribute(selector)
-			element.setAttribute('scope', '')
-			const script = document.createElement('script')
-
-			script.dataset.scope = ''
-			script.type = 'text/html'
-			script.text = `%%_= $scope _%%`
-
-			element.appendChild( script )
-
-			const open = document.createTextNode(`%%_(function(){ var $index = 0; for(var $key in safe(function(){ return ${object} }) ){ var ${varname} = ${object}[$key]; var $scope = JSON.stringify({ '${varname}':${varname}, $index: $index, $key:$key }); _%%`)
-			const close = document.createTextNode(`%%_ $index++; } })() _%%`)
-			wrap(open, element, close)
-		}
-		if (htmlIf) {
-			element.removeAttribute('html-if')
-			const open = document.createTextNode(`%%_ if ( safe(function(){ return ${htmlIf} }) ){ _%%`)
-			const close = document.createTextNode(`%%_ } _%%`)
-			wrap(open, element, close)
-		}
-		if (htmlInner) {
-			element.removeAttribute('html-inner')
-			element.innerHTML = `%%_=${htmlInner}_%%`
-		}
-		if (htmlClass) {
-			element.removeAttribute('html-class')
-			element.className = (element.className + ` %%_=${htmlClass}_%%`).trim()
-		}
-	})
-
-	return (
-		virtual.body.innerHTML
-			.replace(regexTags, '%%_=$1_%%')
-			// Booleans
-			// https://meiert.com/en/blog/boolean-attributes-of-html/
-			.replace(/html-(allowfullscreen|async|autofocus|autoplay|checked|controls|default|defer|disabled|formnovalidate|inert|ismap|itemscope|loop|multiple|muted|nomodule|novalidate|open|playsinline|readonly|required|reversed|selected)=\"(.*?)\"/g, `%%_if(safe(function(){ return $2 })){_%%$1%%_}_%%`)
-			// The rest
-			.replace(/html-(.*?)=\"(.*?)\"/g, (all, key, value) => {
-				if (key === 'key' || key === 'model' || key == 'scope') {
-					return all
-				}
-				if (value) {
-					value = value.replace(/^{|}$/g, '')
-					return `${key}="%%_=safe(function(){ return ${value} })_%%"`
-				} else {
-					return all
-				}
-			})
-	)
-}
-
-const wrap = (open, node, close) => {
-	node.parentNode?.insertBefore(open, node)
-	node.parentNode?.insertBefore(close, node.nextSibling)
-}

package/src/utils/events.ts

@@ -1,86 +0,0 @@
-const customEvent = (() => {
-	return ('CustomEvent' in window && typeof window.CustomEvent === 'function')
-		? (name, data) => new CustomEvent(name, data)
-		: (name, data) => {
-			const newEvent = document.createEvent('CustomEvent')
-			newEvent.initCustomEvent(name, true, true, data)
-			return newEvent
-		}
-})()
-
-const handler = (node, ev) => {
-	return function (e) {
-		const scope = this
-		const detail = e.detail || {}
-		node.__events[ev].forEach(o => {
-			o.handler.apply(scope, [e].concat(detail.args))
-		})
-	}
-}
-
-const removeListener = (node, ev) => {
-	if (node.__events[ev] && node.__events[ev].listener) {
-		node.removeEventListener(
-			ev,
-			node.__events[ev].listener,
-			(ev == 'focus' || ev == 'blur' || ev == 'mouseenter' || ev == 'mouseleave'))
-		delete node.__events[ev]
-	}
-}
-
-const delegate = (node, selector, callback) => {
-	return function (e) {
-
-		const element = this
-		const detail = e.detail || {}
-
-		let parent = e.target
-
-		while (parent) {
-			if (parent.matches(selector)) {
-				e.delegateTarget = parent
-				callback.apply(element, [e].concat(detail.args))
-			}
-			if (parent === node) break
-			parent = parent.parentNode
-		}
-	}
-}
-
-export const on = (node, ev, selectorOrCallback, callback) => {
-
-	node.__events = node.__events || {}
-	node.__events[ev] = (node.__events[ev] || [])
-
-	if (!node.__events[ev].length) {
-		const fn = handler(node, ev)
-		node.addEventListener(
-			ev,
-			fn,
-			(ev == 'focus' || ev == 'blur' || ev == 'mouseenter' || ev == 'mouseleave'))
-		node.__events[ev].listener = fn
-	}
-
-	if (selectorOrCallback.call) {
-		node.__events[ev].push({ handler: selectorOrCallback, callback: selectorOrCallback })
-	} else {
-		node.__events[ev].push({ handler: delegate(node, selectorOrCallback, callback), callback })
-	}
-}
-
-export const off = (node, ev, fn) => {
-
-	if (fn && node.__events[ev] && node.__events[ev].length) {
-		var old = node.__events[ev]
-		node.__events[ev] = node.__events[ev].filter(function (o) { return o.callback != fn; })
-		node.__events[ev].listener = old.listener
-		if (!node.__events[ev].length)
-			removeListener(node, ev)
-	} else {
-		removeListener(node, ev)
-	}
-}
-
-export const trigger = (node, name, args) => {
-	node.dispatchEvent(customEvent(name, { bubbles: true, detail: args }))
-}

package/src/utils/hmr-register.ts

@@ -1,41 +0,0 @@
-//https://github.com/polleverywhere/hmr-custom-element
-
-export const register = (module, tag, clazz) => {
-	// when not in a HMR env, we should be doing the correct thing
-	// and let the browser throw an error because we're importing this
-	// more than once for some reason
-	if (!module.hot) {
-	  try {
-		customElements.define(tag, clazz)
-	  } catch (e) {
-		console.error(`Failed to register element: ${tag}`, e)
-	  }
-
-	  return
-	}
-	// hot module reload the elements
-	//
-	// if we're in a HMR env, we're going to be reloaded so
-	// don't register the elements again
-	if (!customElements.get(tag)) {
-	  try {
-		customElements.define(tag, clazz)
-	  } catch (e) {
-		console.error(`Failed to register element in HMR environment: ${tag}`, e)
-	  }
-	}
-
-	module.hot.accept((e) => {
-	  console.error('HMR error', e)
-	})
-
-	if (module.hot.status && module.hot.status() === 'apply') {
-	  // find each instance and swap the prototype for the new one and re-render
-	  document.querySelectorAll(tag).forEach((node) => {
-		// Swap prototype of instance with new one
-		Object.setPrototypeOf(node, clazz.prototype)
-		// re-render
-		node.connectedCallback()
-	  })
-	}
-  }