@podlite/to-jsx 0.0.7 → 0.0.11

package/CHANGELOG.md

@@ -1,7 +1,17 @@
 # @podlite/to-jsx
 
 ## Upcoming
-
+## 0.0.11
+- use <video> tags for mov/mp4 media
+- update deps
+## 0.0.10
+- fix id for =table
+## 0.0.9
+- fix npm
+## 0.0.8
+- add support for =Image
+- add caption for =Diagram
+- add support for id html attribute
 ## 0.0.7
 - fix deps
 ## 0.0.6

package/lib/index.d.ts

@@ -5,7 +5,7 @@ export declare type CreateElement = typeof React.createElement;
 export interface WrapElement {
     (node: PodNode, ...children: React.ReactChild[]): JSX.Element;
 }
-declare const Podlite: React.FC<{
+export declare const Podlite: React.FC<{
     [key: string]: any;
     children?: string;
     file?: string;

package/lib/index.js

@@ -36,10 +36,14 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import React from 'react';
 import toAny from 'pod6/built/exportAny';
@@ -51,21 +55,22 @@ import { parse } from 'pod6';
 import Writer from 'pod6/built/writer';
 import { podlite as podlite_core } from 'podlite';
 import Diagram from '@podlite/diagram';
-// const createElement = React.createElement
+import { getNodeId } from '@podlite/schema';
 var helperMakeReact = function (_a) {
     var wrapElement = _a.wrapElement;
     var i_key_i = 0;
     var mapByType = {};
     var getIdForNode = function (_a) {
         var _b = _a.type, type = _b === void 0 ? "notype" : _b, _c = _a.name, name = _c === void 0 ? "noname" : _c;
-        var type_idx = type + "_" + name;
+        var type_idx = "".concat(type, "_").concat(name);
         if (!mapByType[type_idx]) {
             mapByType[type_idx] = 0;
         }
         ++mapByType[type_idx];
-        return type_idx + "_" + mapByType[type_idx];
+        return "".concat(type_idx, "_").concat(mapByType[type_idx]);
     };
-    return function (src, node, children) {
+    return function (src, node, children, extraProps) {
+        if (extraProps === void 0) { extraProps = {}; }
         // for string return it
         if (typeof node == 'string') {
             return node;
@@ -74,7 +79,7 @@ var helperMakeReact = function (_a) {
         var key = 'type' in node && node.type ? getIdForNode(node) : ++i_key_i;
         var result = typeof src === 'function'
             ? src(__assign(__assign({}, attr), { key: key, children: children }), children)
-            : React.createElement(src, { key: key }, children);
+            : React.createElement(src, __assign(__assign({}, extraProps), { key: key }), children);
         // // create react element and pass key
         // if (!isValidElementType(src)) {
         //     throw new Error(`Bad React element for ${ruleName} rule `)
@@ -85,18 +90,10 @@ var helperMakeReact = function (_a) {
         return result;
     };
 };
-var Podlite = function (_a) {
+export var Podlite = function (_a) {
     var children = _a.children, options = __rest(_a, ["children"]);
-    // console.log({podlite:podlite(children, options)})
-    // return React.cloneElement(
     var result = podlite(children, options);
     return result;
-    //      props as React.Props<any>
-    // )
-    // return React.cloneElement(
-    //     podlite(children, options),
-    // //   props as React.Props<any>
-    // )
 };
 var mapToReact = function (makeComponent) {
     var mkComponent = function (src) { return function (writer, processor) { return function (node, ctx, interator) {
@@ -114,7 +111,7 @@ var mapToReact = function (makeComponent) {
                 if (!nesting) {
                     return children;
                 }
-                var arr = __spreadArray([], __read(Array(nesting).keys()));
+                var arr = __spreadArray([], __read(Array(nesting).keys()), false);
                 return arr.reduce(function (acc) { return makeComponent('blockquote', node, acc); }, children);
             };
         };
@@ -134,6 +131,37 @@ var mapToReact = function (makeComponent) {
             return React.createElement("code", { key: key },
                 React.createElement("pre", null, children));
         }),
+        'Image': subUse({
+            // inside head don't wrap into <p>
+            ':image': setFn(function (node, ctx) {
+                var linkTo = ctx.link;
+                return mkComponent(function (_a) {
+                    var children = _a.children, key = _a.key;
+                    var Img = node.src.match(/(mp4|mov)$/)
+                        ? React.createElement("video", { controls: true, key: key },
+                            " ",
+                            React.createElement("source", { src: node.src, type: "video/mp4" }),
+                            " ")
+                        : React.createElement("img", { key: key, src: node.src, alt: node.alt });
+                    return linkTo ? React.createElement("a", { key: key, href: linkTo }, Img) : Img;
+                });
+            }),
+            'caption': mkComponent(function (_a) {
+                var children = _a.children, key = _a.key;
+                return React.createElement("div", { className: "caption", key: key }, children);
+            })
+        }, setFn(function (node, ctx) {
+            var level = node.level;
+            var id = getNodeId(node, ctx);
+            var conf = makeAttrs(node, ctx);
+            if (conf.exists('link')) {
+                ctx.link = conf.getFirstValue('link');
+            }
+            return mkComponent(function (_a) {
+                var children = _a.children, key = _a.key;
+                return React.createElement("div", { className: "image_block", key: key, id: id }, children);
+            });
+        })),
         'image': nodeContent,
         ':image': setFn(function (node, ctx) {
             return mkComponent(function (_a) {
@@ -142,9 +170,14 @@ var mapToReact = function (makeComponent) {
             });
         }),
         'Diagram': function () { return function (node, ctx, interator) {
+            var conf = makeAttrs(node, ctx);
+            var caption = conf.exists("caption")
+                ? conf.getFirstValue("caption")
+                : null;
+            var id = getNodeId(node, ctx);
             return makeComponent(function (_a) {
                 var children = _a.children, key = _a.key;
-                return React.createElement(Diagram, { isError: node.custom, chart: node.content[0].value });
+                return React.createElement(Diagram, { id: id, isError: node.custom, caption: caption, chart: node.content[0].value });
             }, node, interator(node.content, __assign({}, ctx)));
         }; },
         ':text': function (writer, processor) { return function (node, ctx, interator) {
@@ -158,9 +191,10 @@ var mapToReact = function (makeComponent) {
             ':para': nodeContent,
         }, setFn(function (node, ctx) {
             var level = node.level;
+            var id = getNodeId(node, ctx);
             return mkComponent(function (_a) {
                 var level = _a.level, children = _a.children, key = _a.key;
-                return React.createElement("h" + level, { key: key }, children);
+                return React.createElement("h".concat(level), { key: key, id: id }, children);
             });
         })),
         ':blankline': emptyContent(),
@@ -266,10 +300,10 @@ var mapToReact = function (makeComponent) {
                 }
                 var FootNotes = makeComponent(function (_a) {
                     var children = _a.children, key = _a.key;
-                    return React.createElement("div", { key: key + "_FOOTNOTES", className: "footnotes" }, footnotes.map(function (footnote, id) {
+                    return React.createElement("div", { key: "".concat(key, "_FOOTNOTES"), className: "footnotes" }, footnotes.map(function (footnote, id) {
                         return React.createElement("p", { key: id },
                             React.createElement("sup", { id: footnote.fnId, className: "footnote" },
-                                React.createElement("a", { href: "#" + footnote.fnRefId },
+                                React.createElement("a", { href: "#".concat(footnote.fnRefId) },
                                     "[",
                                     footnote.gid,
                                     "]")),
@@ -288,8 +322,8 @@ var mapToReact = function (makeComponent) {
                 }
                 // get foot note id
                 var gid = writer.gid++;
-                var fnRefId = "fnref:" + gid;
-                var fnId = "fn:" + gid;
+                var fnRefId = "fnref:".concat(gid);
+                var fnId = "fn:".concat(gid);
                 if (!writer.hasOwnProperty('FOOTNOTES')) {
                     writer.FOOTNOTES = [];
                 }
@@ -303,7 +337,7 @@ var mapToReact = function (makeComponent) {
                 return makeComponent(function (_a) {
                     var children = _a.children, key = _a.key;
                     return React.createElement("sup", { key: key, id: fnRefId, className: "footnote" },
-                        React.createElement("a", { href: "#" + fnId },
+                        React.createElement("a", { href: "#".concat(fnId) },
                             "[",
                             gid,
                             "]"));
@@ -392,10 +426,11 @@ var mapToReact = function (makeComponent) {
                     console.warn('[jsx] no content in node');
                     return '';
                 }
+                var id = getNodeId(node, ctx);
                 return makeComponent(function (_a) {
                     var key = _a.key, children = _a.children;
-                    return React.createElement("table", { key: key },
-                        React.createElement("caption", null, attr.caption),
+                    return React.createElement("table", { key: key, id: id },
+                        React.createElement("caption", { className: "caption" }, attr.caption),
                         React.createElement("tbody", null, children));
                 }, node, interator(node.content, __assign({}, ctx)));
             };
@@ -423,8 +458,35 @@ var mapToReact = function (makeComponent) {
             if (!(node.content instanceof Array)) {
                 console.error(node);
             }
-            return makeComponent('li', node, interator(node.content, __assign({}, ctx)));
+            var id = getNodeId(node, ctx);
+            return makeComponent('li', node, interator(node.content, __assign({}, ctx)), { id: id });
         }; },
+        // table of content
+        ':toc': setFn(function (node, ctx) {
+            var tocTitle = node.title;
+            return mkComponent(function (_a) {
+                var children = _a.children, key = _a.key;
+                return React.createElement("div", { className: "toc", key: key },
+                    tocTitle ? React.createElement("div", { className: "toctitle" }, tocTitle) : '',
+                    children);
+            });
+        }),
+        ':toc-list': setFn(function (node, ctx) {
+            var level = node.level;
+            return mkComponent(function (_a) {
+                var children = _a.children, key = _a.key;
+                return React.createElement("ul", { className: "toc-list listlevel".concat(level), key: key }, children);
+            });
+        }),
+        ':toc-item': subUse({
+            // inside head don't wrap into <p>
+            ':para': nodeContent,
+        }, setFn(function (node, ctx) {
+            return mkComponent(function (_a) {
+                var children = _a.children, key = _a.key;
+                return React.createElement("li", { className: "toc-item", key: key }, children);
+            });
+        })),
     };
 };
 function podlite(children, _a) {
@@ -449,7 +511,7 @@ function podlite(children, _a) {
     var writer = new Writer(function (s) {
     });
     var res = toAny({ processor: parse })
-        .use({ '*:*': function (writer, processor) { return function (node, ctx, interator) {
+        .use({ '*:*': function () { return function (node, ctx, interator) {
             // skip named blocks
             if (isNamedBlock(node.name)) {
                 return null;
@@ -463,7 +525,7 @@ function podlite(children, _a) {
                 }, node, interator(node.content, __assign({}, ctx)));
             }
             console.warn('[podlite] Not supported: ' + JSON.stringify(node, null, 2));
-            return React.createElement('code', { key: ++i_key_i }, "not supported node:" + JSON.stringify(node, null, 2));
+            return React.createElement('code', { key: ++i_key_i }, "not supported node:".concat(JSON.stringify(node, null, 2)));
         }; } })
         .use(rules)
         .run(ast, writer);

package/package.json

@@ -1,37 +1,29 @@
 {
   "name": "@podlite/to-jsx",
-  "version": "0.0.7",
+  "version": "0.0.11",
   "description": "The lightweight, customizable React podlite component.",
-  "main": "index.js",
   "types": "lib/index.d.ts",
+  "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "clean": "rm -rf dist lib tsconfig.tsbuildinfo",
     "build": "tsc",
-    "test": "jest  --verbose"
+    "test": "yarn g:jest  --passWithNoTests"
   },
   "dependencies": {
-    "@podlite/diagram": "^0.0.7",
-    "pod6": "0.0.41",
+    "@podlite/diagram": "^0.0.11",
+    "@podlite/schema": "0.0.8",
+    "pod6": "0.0.43",
     "react-is": "^17.0.2"
   },
   "publishConfig": {
-    "access": "public"
-  },
-  "devDependencies": {
-    "@types/jest": "^26.0.22",
-    "@types/react": "^17.0.3",
-    "jest-serializer-html": "^7.0.0",
-    "prettier": "^2.2.1",
-    "react": "^16.12.0",
-    "react-dom": "^17.0.2",
-    "ts-jest": "^26.5.4",
-    "typescript": "4.2.3"
+    "access": "public",
+    "main": "index.js"
   },
   "peerDependencies": {
     "@podlite/diagram": "*",
+    "@podlite/schema": "*",
     "pod6": "*",
-    "react": "*"
-  },
-  "gitHead": "eaae7ef7bee8588d8dbe3abbff3a3a03e43b849e"
-}
+    "react": "^16.0.0 || ^17.0.0",
+    "react-dom": "^16.0.0 || ^17.0.0"
+  }
+}

package/src/index.tsx

@@ -9,12 +9,12 @@ import {parse} from 'pod6'
 import Writer from 'pod6/built/writer'
 import { podlite as podlite_core, PodliteExport } from 'podlite'
 import Diagram, { plugin as DiagramPlugin } from '@podlite/diagram';
-import {Verbatim, PodNode, Text, Rules, RulesStrict} from '@podlite/schema'
+import {Verbatim, PodNode, Text, Rules, RulesStrict, getNodeId, BlockImage, BlockNamed, getFromTree, Image} from '@podlite/schema'
+import { Toc } from '@podlite/schema'
 
 // interface SetFn { <T>(<T>node, ctx:any) => () => () =>void
 // }
 export type CreateElement = typeof React.createElement
-// const createElement = React.createElement
 const helperMakeReact = ({wrapElement})=>{
     let i_key_i = 0;
     let mapByType= {};
@@ -24,7 +24,7 @@ const helperMakeReact = ({wrapElement})=>{
         ++mapByType[type_idx]
         return `${type_idx}_${mapByType[type_idx]}`
     }
-    return function(src:string|Function, node:PodNode, children )  {
+    return function(src:string|Function, node:PodNode, children, extraProps = {} )  {
         // for string return it
         if (typeof node == 'string') {
             return node
@@ -32,11 +32,10 @@ const helperMakeReact = ({wrapElement})=>{
         const { ...attr} = node
 
         const key = 'type' in node  &&  node.type ? getIdForNode(node) : ++i_key_i
-
         const result = 
             typeof src === 'function'
                             ? src({ ...attr, key , children}, children)
-                            : React.createElement(src,{ key }, children  )
+                            : React.createElement(src,{ ...extraProps, key }, children  )
 
         // // create react element and pass key
         // if (!isValidElementType(src)) {
@@ -56,7 +55,7 @@ export interface  WrapElement {
     ...children: React.ReactChild[]
   ) : JSX.Element
     }
-const Podlite: React.FC<{
+export const Podlite: React.FC<{
     [key: string]: any
     children?: string
     file?:string,
@@ -64,22 +63,14 @@ const Podlite: React.FC<{
     wrapElement?:WrapElement,
     tree?:PodliteExport
   }>  = ({ children, ...options }) => {
-          // console.log({podlite:podlite(children, options)})
-    // return React.cloneElement(
             const result:any = podlite(children, options)
             return result
-        //      props as React.Props<any>
-            // )
-    // return React.cloneElement(
-    //     podlite(children, options),
-    // //   props as React.Props<any>
-    // )
   }
 const mapToReact = (makeComponent):Partial<RulesStrict> => {
 
     const mkComponent = (src) => ( writer, processor )=>( node, ctx, interator )=>{
         // check if node.content defined
-        return makeComponent(src, node, 'content' in node ? interator(node.content, { ...ctx}) : [] )
+        return makeComponent(src, node, 'content' in node ? interator(node.content, { ...ctx}) : [])
     }
     // Handle nested block and :nested block attribute
     const handleNested = ( defaultHandler, implicitLevel?:number ) => {
@@ -106,14 +97,44 @@ const mapToReact = (makeComponent):Partial<RulesStrict> => {
     ':ambient': emptyContent(),
     ':code': mkComponent(({ children, key })=><code key={key}><pre>{children}</pre></code>),
     'code': mkComponent(({ children, key })=><code key={key}><pre>{children}</pre></code>),
-    'image': nodeContent,
+    'Image': subUse({
+        // inside head don't wrap into <p>
+            ':image' : setFn(( node:Image, ctx ) => {
+                const linkTo = ctx.link
+                return mkComponent(({children, key })=>{ 
+                    const Img = node.src.match(/(mp4|mov)$/) 
+                            ? <video controls key={key}> <source src={node.src} type="video/mp4" /> </video>
+                            : <img key={key} src={node.src} alt={node.alt}/>
+                    return linkTo ?<a  key={key} href={linkTo}>{Img}</a> : Img
+                })
+                }),
+            'caption': mkComponent(({ children, key })=><div className="caption" key={key}>{children}</div>)
+            }, 
+            setFn(( node, ctx ) => {
+            const {level} = node
+            const id = getNodeId(node, ctx)
+            const conf = makeAttrs(node, ctx)
+            if ( conf.exists('link') ) {
+                ctx.link = conf.getFirstValue('link')
+            }
+            return mkComponent(({children, key })=>
+            <div className="image_block" key={key} id={id}>{children}</div>)
+            
+        })
+ ),
+     'image':nodeContent,
     ':image': setFn(( node, ctx ) => {
         return mkComponent(({ children, key })=><img key={key} src={node.src} alt={node.alt}/>)
     }),
 
     'Diagram':  () => (node, ctx, interator) => {
+        const conf = makeAttrs(node, ctx);
+        const caption = conf.exists("caption")
+          ? conf.getFirstValue("caption")
+          : null;
+        const id = getNodeId(node, ctx)
         return makeComponent(({children, key} )=>{ 
-            return <Diagram  isError={node.custom} chart={node.content[0].value}/>
+            return <Diagram id={id} isError={node.custom} caption={caption} chart={node.content[0].value}/>
             },node,interator(node.content, { ...ctx}) )
       },
     ':text':( writer, processor )=>( node:Text, ctx, interator )=>{
@@ -127,8 +148,9 @@ const mapToReact = (makeComponent):Partial<RulesStrict> => {
              ':para' : nodeContent,
          },
          setFn(( node, ctx ) => {
-             const {level} = node
-             return mkComponent(({level,children, key })=>React.createElement(`h${level}`,{key}, children))
+             const {level } = node
+             const id = getNodeId(node, ctx)
+             return mkComponent(({level,children, key })=>React.createElement(`h${level}`,{key, id}, children))
          })
      ),
 
@@ -320,9 +342,10 @@ const mapToReact = (makeComponent):Partial<RulesStrict> => {
                             console.warn('[jsx] no content in node')
                             return ''
                         }
+                        const id = getNodeId(node, ctx)
                         return makeComponent(({key, children})=>{
-                                return <table key={key}>
-                                    <caption>{attr.caption}</caption>
+                                return <table key={key} id={id}>
+                                    <caption className="caption">{attr.caption}</caption>
                                     <tbody>{children}</tbody></table>
                             }, node,  interator(node.content, { ...ctx}) )
                     }
@@ -353,8 +376,25 @@ const mapToReact = (makeComponent):Partial<RulesStrict> => {
         if (! (node.content instanceof Array)) {
             console.error(node)
         }
-        return makeComponent('li', node, interator(node.content, { ...ctx}) )
+        const id = getNodeId(node,ctx)
+        return makeComponent('li', node, interator(node.content, { ...ctx}), {id} )
     },
+    // table of content
+    ':toc': setFn(( node:Toc, ctx ) => {
+        const tocTitle = node.title
+        return mkComponent(({children, key })=><div className="toc" key={key}>{ tocTitle ? <div className="toctitle">{tocTitle}</div> : '' }{children}</div>)
+    }),
+    ':toc-list': setFn(( node, ctx ) => {
+        const { level } = node
+        return mkComponent(({children, key })=><ul className={`toc-list listlevel${level}`} key={key}>{children}</ul>)
+    }),
+    ':toc-item': subUse({
+        // inside head don't wrap into <p>
+             ':para' : nodeContent,
+         },
+         setFn(( node, ctx ) => {
+        return mkComponent(({children, key })=><li className="toc-item" key={key}>{children}</li>)
+    })),
 
     }
 }
@@ -383,7 +423,7 @@ function  podlite (children:string, { file,plugins=()=>{}, wrapElement, tree}:{f
     }) as WriterPostinterator
     const  res = 
     toAny({processor:parse})
-    .use({'*:*':( writer, processor )=>( node, ctx, interator )=>{
+    .use({'*:*':() => ( node, ctx, interator ) => {
 
         // skip named blocks
         if (isNamedBlock(node.name)) {