Merge pull request #5 from dashborg/dev-0.3.1

Hibiki HTML v0.3.1 Release

README.md

@@ -28,7 +28,7 @@ no build tools to download and run.
 Just add one script tag to the top of your page or template:
 
 ```
-<script src="https://cdn.hibikihtml.com/hibiki/latest/hibiki-prod.min.js"></script>
+<script src="https://cdn.hibikihtml.com/hibiki/v0.3.1/hibiki-prod.min.js"></script>
 ```
 
 Wrap any portion of your content with a &lt;template hibiki&gt; tag and you have your first

changelog.md

@@ -1,5 +1,46 @@
 # Change Log
 
+## v0.3.1
+
+More internal changes and features to support complex UI component libraries.
+Start a set of standard versioned Hibiki HTML libraries that can be loaded using a special <import-library lib="..."> syntax.
+Standard library source code is available on GitHub at https://github.com/dashborg/hibiki-libs with 
+templates and instructions on how to build custom libraries that integrate existing JS libraries and React controls.
+
+* import Standard Hibiki HTML libraries using <import-library lib="[LIBRARY-NAME]@[VERSION]"></import-library>
+* removed 'alert' statement, use log(..., @alert=true);
+* removed 'bubble' statement, use fire->event(..., @bubble=true);
+* allow 'fire' statement to take nodeuuid as at-arg, fire->event(..., @nodeuuid="expr");
+* added 'nosort' option to fn:sort()
+* HibikiRequest.data is now params stripped of at-args (and positional args)
+* added deref() expression which removes one level of ref()
+* allow getters on HibikiBlob oject (mimetype, bloblen, name, base64), fn:blob funcs are now obsolete
+* new @event context var passed to all native handlers (and propagated if events are re-fired) that wraps react synthetic event
+* HibikiEvent object, 'type' getter, and 2 lambda getters that can be invoked (stopPropagation, and preventDefault)
+* rename $c._hibiki to $c.@hibiki ($[email protected] contains node uuid)
+* new whitespace elimination rules in hibiki html parser.  by default, trims whitespace from beginning and end of node's children (except for 'pre', 'code', and 'script' tags).  removes any whitespace-only nodes from special HTML nodes like 'ul', and table nodes).
+* added 'hibiki:ws' attribute to override whitespace handling for node, modes = "none", "all", "trim", and "trim-nl"
+* new hibiki attribute namespace, 'h:' or 'hibiki:' attributes for hibiki specific functionality
+* moved 'innerhtml' and 'outerhtml' special attributes to hibiki namespace
+* added aliases for 'foreach', 'automerge', 'if', and 'unwrap' attributes in hibiki namespace: e.g. 'hibiki:foreach', 'hibiki:automerge', 'h:unwrap'
+* allow script type="module" for inline hibiki script nodes
+* no longer allow rendering Hibiki HTML directly to 'body' tag (bad interactions with 3rd party libraries)
+* 'foreach' will now skip keys that start with '@' on ojects.  to iterate over them, use fn:objallkeys().
+* added fn:objkeys(), fn:objatkeys() and fn:objallkeys() to return object keys (also work with HibikiWrappedObj).  objkeys omits any keys starting with '@', objallkeys returns all keys (include @), and objatkeys only returns @ keys.
+* added 'type' and 'data' getters to HibikiError object
+* http module errors set error.type to 'http' and error.data to an object with 'status', 'statustext', and 'data' (parsed error response).  can be used to inspect and use error responses (e.g. JSON error bodies with non-200 status codes)
+* if http module encounters unparsable json, it will throw an error, and set error.data.data to a blob with mimetype 'text/json-unparseable'
+* http network errors get error.data.status set to 599, and err.data.statustext to 'Network Error'
+* attributes prefixed with 'html-' will overwrite non-prefixed attributes in HTML nodes.  workaround for chrome/firefox issues where <img> src tags are getting preloaded, even in <template> or AJAX requests.  now you can write <img html-src="*..."> without causing an extra browser request.
+* assignment to a ref will set data one-level deep (will not recursively traverse refs), use deref() manually to set deep refs
+* internal: new HibikiParamsObj to manage position/named params in a more structured way
+* internal: HibikiParamsObj passed to jsfuncs
+* internal: HibikiParamsObj available in HibikiRequest object
+* bugfix: inconsistencies in accessing getters on HibikiNode object
+* bugfix: more consistent handling of noattr args in jsfuncs (stripped out by HibikiParamsObj)
+* bugfix: rendering of text inside of html option tag
+* bugfix: don't call preventDefault on bubbled click events (allows anchor tags to work as expected even if a click.handler is defined)
+
 ## v0.3.0
 
 Hibiki HTML is now licensed under the OSI approved MPL v2 (Mozilla Public License)!

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hibiki",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Hibiki HTML",
   "main": "dist/hibiki.js",
   "repository": "https://github.com/sawka/hibiki",

playground/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=1200">
     <title>Hibiki HTML Playground</title>
     <link rel="preconnect" href="https://fonts.gstatic.com">
-    <script src="https://cdn.hibikihtml.com/hibiki/v0.3.0/hibiki-prod.min.js"></script>
+    <script src="https://cdn.hibikihtml.com/hibiki/v0.3.1/hibiki-prod.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="/playground.css">

playground/libs/codemirror.html

@@ -5,7 +5,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.64.0/mode/javascript/javascript.min.js" integrity="sha512-DJ/Flq7rxJDDhgkO49H/rmidX44jmxWot/ku3c+XXEF9XFal78KIpu7w6jEaQhK4jli1U3/yOH+Rp3cIIEYFPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.64.0/mode/css/css.min.js" integrity="sha512-5jz5G7Fn6Xbc3YA/5KYXYwxSkyKEh7oEFNwc7cCnMs48diTBh24gKxcbt7r8Do+xFK6pJgr+BFfcKnUne+XUvA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.64.0/mode/htmlmixed/htmlmixed.min.js" integrity="sha512-IC+qg9ITjo2CLFOTQcO6fBbvisTeJmiT5D5FnXsCptqY8t7/UxWhOorn2X+GHkoD1FNkyfnMJujt5PcB7qutyA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-  <script>
+  <script type="module">
     function handleControlEnter(state, uuid, cm) {
         let actions = [];
         let text = cm.getValue();
@@ -51,7 +51,7 @@
 
   <define-component name="editor">
     <div class="* 'fontsize-' + ($c.fontsize + 3)" class.fontsizer>
-      <textarea mount.handler="//@lib/mountCM(id=$c._hibiki.uuid, text=$args.initialtext)" class="editor" id="*'editor-textarea-' + $c._hibiki.uuid"></textarea>
+      <textarea mount.handler="//@lib/mountCM(id=$c.@hibiki.uuid, text=$args.initialtext)" class="editor" id="*'editor-textarea-' + $c.@hibiki.uuid"></textarea>
     </div>
     <div class="columns mb-0 pb-2">
       <div class="column pb-0" style="margin-left: 29px;">
@@ -68,7 +68,7 @@
       </div>
       <div class="column pb-0"></div>
       <div class="column is-flex-grow-0 pb-0" style="flex-basis: content;">
-        <button click.handler="@text = //@lib/getCMText(id=$c._hibiki.uuid); fire->change(@text)" class="button is-primary pl-5 pr-5 mr-2" style="font-weight: bold;">Submit (Ctrl-Enter)</button>
+        <button click.handler="@text = //@lib/getCMText(id=$c.@hibiki.uuid); fire->change(@text)" class="button is-primary pl-5 pr-5 mr-2" style="font-weight: bold;">Submit (Ctrl-Enter)</button>
         <div style="width:12px;"></div>
       </div>
     </div>

playground/libs/playground.html

@@ -51,7 +51,7 @@
     }
   </define-handler>
 
-  <script>
+  <script type="module">
     function makeIFrame(req) {
         let iframeUrl = (req.data.bulma ? "/playground-iframe-bulma.html" : "/playground-iframe-clean.html");
         fetch(iframeUrl).then((resp) => {

playground/playground-iframe-bulma.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <title>Hibiki Playground Preview</title>
     <link rel="preconnect" href="https://fonts.gstatic.com">
-    <script src="https://cdn.hibikihtml.com/hibiki/latest/hibiki-prod.min.js"></script>
+    <script src="https://cdn.hibikihtml.com/hibiki/v0.3.1/hibiki-prod.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>

playground/playground-iframe-clean.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <title>Hibiki Playground Preview</title>
     <link rel="preconnect" href="https://fonts.gstatic.com">
-    <script src="https://cdn.hibikihtml.com/hibiki/latest/hibiki-prod.min.js"></script>
+    <script src="https://cdn.hibikihtml.com/hibiki/v0.3.1/hibiki-prod.min.js"></script>
   </head>
   <body>
     %%TEXT%%

playground/tutorial/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=1200">
     <title>Hibiki HTML Tutorial</title>
     <link rel="preconnect" href="https://fonts.gstatic.com">
-    <script src="https://cdn.hibikihtml.com/hibiki/v0.3.0/hibiki-prod.min.js"></script>
+    <script src="https://cdn.hibikihtml.com/hibiki/v0.3.1/hibiki-prod.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="/playground.css">

playground/tutorial/t-gs.html

@@ -10,7 +10,7 @@ <h4 class="title is-4">Getting Started</h4>
   You can create a Hibiki HTML app on any page in two steps.  First add the Hibiki HTML JavaScript tag to
   your page:
 </p>
-<pre class="codeblock">&lt;script src="https://cdn.hibikihtml.com/hibiki/latest/hibiki-prod.min.js"&gt;&lt;/script&gt;</pre>
+<pre class="codeblock">&lt;script src="https://cdn.hibikihtml.com/hibiki/v0.3.1/hibiki-prod.min.js"&gt;&lt;/script&gt;</pre>
 <p>
   Next add a Hibiki template block to your page where you want the application to display (you can also wrap
   your existing HTML to instantly convert it to a Hibiki app):
@@ -50,7 +50,7 @@ <h6 class="title is-6 mb-2">How the preview and tutorial was built</h6>
   <a href="https://bulma.io/" target="_blank">Bulma</a> CSS library, and
   <a href="https://fontawesome.com/v4.7/" target="_blank">FontAwesome v4.7</a>.
 </p>
-<pre class="codeblock">&lt;script src="https://cdn.hibikihtml.com/hibiki/latest/hibiki-prod.min.js">&lt;/script>
+<pre class="codeblock">&lt;script src="https://cdn.hibikihtml.com/hibiki/v0.3.1/hibiki-prod.min.js">&lt;/script>
 &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"></pre>
 

playground/tutorial/t-intro.html

@@ -28,7 +28,7 @@ <h4 class="title is-4">Easy to Get Started</h4>
 <p>
   <a class="content-anchor" name="section1"></a>
   Add one script tag to the top of your page:<br>
-  <code>https://cdn.hibikihtml.com/hibiki/latest/hibiki-prod.min.js</code>
+  <code>https://cdn.hibikihtml.com/hibiki/v0.3.1/hibiki-prod.min.js</code>
 </p>
 <p>
   Wrap any portion of your content with a &lt;template&nbsp;hibiki&gt; tag and you have your first

playground/tutorial/t-remote-handlers.html

@@ -45,7 +45,7 @@ <h4 class="title is-4">Remote Handlers</h4>
 </p>
 <pre class="codeblock">
   GET /api/test-1?y=22(x=55)
-  POST /api/test-post(user={id: 55, name: 'mike'}, access_code='A55', @enc='www')
+  POST /api/test-post(user={id: 55, name: 'mike'}, access_code='A55', @enc='url')
 </pre>
 
 <div class="box has-background-info-light">