@yr-lang/yr 0.4.0 → 0.4.1

package/lib/@react.yr

@@ -1,7 +1,10 @@
 %%
 
-_@renderReact(#query) {
-  ReactDOM.createRoot(document.querySelector(#query)).render(
+_@renderReact(#query, #app=App) {
+  import { useState, useEffect } from "react";
+  function #app() {
     ___
-  );
+  }
+  ReactDOM.createRoot(document.querySelector(#query))
+    .render(<#app />);
 @}

package/lib/Yrci/A1.yr

@@ -1,6 +1,6 @@
 @@
 
-TesteA1
+alert(1);
 
 ++
 

package/lib/Yrci/React.yr

@@ -6,13 +6,10 @@ _ #root
 
 @@r
 
-import { useState, useEffect } from "react";
-function App() {
+_@renderReact('#root') {
   const [count, setCount] = useState(0);
   const [message, setMessage] = useState('Loading...');
-  useEffect(() => {
-    setMessage(`Count is ${count}`);
-  }, [count]);
+  useEffect(() => setMessage(`Count is ${count}`), [count]);
   return (
     <div>
       <h1>Simple React App</h1>
@@ -22,8 +19,4 @@ function App() {
       </button>
     </div>
   );
-}
-
-_@renderReact('#root') {
-  <App />
 @}

package/lib/cdn.json

@@ -0,0 +1 @@
+[{"isDir":false,"category":"Ciyr","option":"A1"},{"isDir":false,"category":"Ciyr","option":"B1"},{"isDir":false,"category":"Ciyr","option":"B2"},{"isDir":false,"category":"Ciyr","option":"C1"},{"isDir":false,"category":"Ciyr","option":"C2"},{"isDir":false,"category":"Ciyr","option":"C2_2"},{"isDir":false,"category":"Ciyr","option":"a1"},{"isDir":false,"category":"Ciyr","option":"b1"},{"isDir":false,"category":"Ciyr","option":"c1"},{"isDir":false,"category":"Yrci","option":"&app"},{"isDir":false,"category":"Yrci","option":"&app2"},{"isDir":false,"category":"Yrci","option":"@m1"},{"isDir":false,"category":"Yrci","option":"@m2"},{"isDir":false,"category":"Yrci","option":"A1"},{"isDir":false,"category":"Yrci","option":"A2"},{"isDir":false,"category":"Yrci","option":"A3"},{"isDir":false,"category":"Yrci","option":"B1"},{"isDir":false,"category":"Yrci","option":"C1"},{"isDir":false,"category":"Yrci","option":"C1r"},{"isDir":false,"category":"Yrci","option":"C2"},{"isDir":false,"category":"Yrci","option":"C3"},{"isDir":false,"category":"Yrci","option":"C4"},{"isDir":false,"category":"Yrci","option":"C5"},{"isDir":false,"category":"Yrci","option":"C6"},{"isDir":false,"category":"Yrci","option":"C7"},{"isDir":false,"category":"Yrci","option":"C8"},{"isDir":false,"category":"Yrci","option":"C9"},{"isDir":false,"category":"Yrci","option":"Index_"},{"isDir":false,"category":"Yrci","option":"Login"},{"isDir":false,"category":"Yrci","option":"M1"},{"isDir":false,"category":"Yrci","option":"React"},{"isDir":false,"category":"Yrci","option":"Sp"},{"isDir":false,"category":"Yrci","option":"T1"},{"isDir":false,"category":"Yrci","option":"T2"},{"isDir":false,"category":"Yrci","option":"Ta1"},{"isDir":false,"category":"Yrci","option":"Ta2"},{"isDir":false,"category":"Yrci","option":"Tg"},{"isDir":false,"category":"Yrci","option":"Wr"},{"isDir":false,"category":"Yrci","option":"Wrapper"},{"isDir":false,"category":"Yrci","option":"Wrapper1"},{"isDir":false,"category":"Yrci","option":"Wrapper2"},{"isDir":false,"category":"Yrci","option":"Wrapper3"},{"isDir":false,"category":"Yrci","option":"Wrapperext"},{"isDir":false,"category":"Yrci","option":"Wrt"},{"isDir":false,"category":"Yrci","option":"Yrwm"},{"isDir":false,"category":"Yrci","option":"a1"},{"isDir":false,"category":"Yrci","option":"a2"},{"isDir":false,"category":"Yrci","option":"app"},{"isDir":false,"category":"Yrci","option":"b2"},{"isDir":false,"category":"Yrci","option":"j1"},{"isDir":false,"category":"Yrci","option":"j2"},{"isDir":false,"category":"Yrci","option":"j3"},{"isDir":false,"category":"Yrci","option":"modal"},{"isDir":false,"category":false,"option":"%build"},{"isDir":false,"category":false,"option":"%deploy"},{"isDir":false,"category":false,"option":"%gh-pages"},{"isDir":false,"category":false,"option":"%nvm"},{"isDir":false,"category":false,"option":"%serve"},{"isDir":false,"category":false,"option":"@react"},{"isDir":false,"category":false,"option":"@try"},{"isDir":false,"category":false,"option":"@wrapper"},{"isDir":false,"category":false,"option":"bodyblock"},{"isDir":false,"category":false,"option":"ci"},{"isDir":false,"category":false,"option":"contenteditable"},{"isDir":false,"category":false,"option":"crypto"},{"isDir":false,"category":false,"option":"element"},{"isDir":false,"category":false,"option":"hidden"},{"isDir":false,"category":false,"option":"utils"}]

package/lib/index.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+const path = require('path');
+const fs = require('fs');
+const yr = require(path.join(__dirname, '../node'));
+
+fs.writeFileSync(path.join(__dirname, 'cdn.json'),
+  JSON.stringify(yr.tree(__dirname, { yr: true })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yr-lang/yr",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Yr is a modern structural language and parser",
   "main": "./node.js",
   "exports": {

package/yr.js

@@ -73,13 +73,34 @@ for (let item of Object.keys(namespaces)) {
   }
 }
 
-let viewType;
+let viewType, scriptUrl, builtInLib = {};
 function transformReact(code, sections, section, config) {
-  code = module.exports.macros(sections, section);
+  code = core.macros(sections, section);
 
   if (viewType === 'cdn') {
-    if (!window.Babel) throw 'Babel unavailable';
-    return window.Babel.transform(code, { presets: ['react'] }).code;
+    if (!window.Babel) return 'alert("Babel unavailable");';
+    const transformed = window.Babel.transform(code, {
+      presets: [['react', { runtime: 'classic' }]],
+      plugins: ['transform-modules-commonjs']
+    }).code;
+
+    const shim = `
+      const require = (function () {
+        const modules = {
+          'react': window.React,
+          'react-dom': window.ReactDOM,
+          'react-dom/client': window.ReactDOM
+        };
+        return function (name) {
+          if (modules[name]) return modules[name];
+          throw new Error('Módulo não disponível no runtime cdn: ' + name);
+        };
+      })();
+      const exports = {};
+      const module = { exports };
+    `;
+
+    return `(function(){\n${shim}\n${transformed}\n})();`;
   }
 
   if (viewType === 'npm') {
@@ -108,7 +129,7 @@ function transformReact(code, sections, section, config) {
       if (!unresolved) throw error;
 
       if (sections) sections.reactBuildFailed = true;
-      return '';
+      return 'alert("esbuild error");';
     }
   }
 }
@@ -672,6 +693,12 @@ const parsers = {
 const core = {
   set(libFn) { this.lib = libFn },
   lib(category=false, option=false, parseConfig=false) {
+    if (typeof window !== 'undefined') {
+      return (category && option) ? builtInLib[`${
+        (category === '__') ? '' : category + '/'
+      }${option}`.replace(/\.yr/g, '')] : builtInLib;
+    }
+
     return { yr: '++\n\n_' };
   },
   macros(sections, key, obfuscate=false) {
@@ -1910,6 +1937,36 @@ if (typeof module !== 'undefined' && module.exports) {
 if (typeof window !== 'undefined' && !window.yr) {
   viewType = 'cdn';
   window.yr = core.parse.bind(core);
+  scriptUrl = document.currentScript?.src;
+  const scripts = [
+    'https://unpkg.com/react@18/umd/react.production.min.js',
+    'https://unpkg.com/react-dom@18/umd/react-dom.production.min.js',
+    'https://unpkg.com/@babel/standalone/babel.min.js'
+  ];
+  scripts.forEach(src => {
+    const script = document.createElement('script');
+    script.src = src;
+    document.head.appendChild(script);
+  });
+  function getWrapperName(item) {
+    return (item.category && item.category !== 'yr')
+      ? `${item.category}/${item.option}` : item.option;
+  }
+  async function setBuiltInLib() {
+    const base = new URL('./lib/', scriptUrl);
+    let lib = await fetch(new URL('./cdn.json', base));
+    lib = await lib.json();
+    for (let item of lib) {
+      const wrapperName = getWrapperName(item);
+      delete item.isDir;
+      const res = await
+        fetch(new URL(encodeURIComponent(`./${wrapperName}.yr`), base));
+      item.yr = await res.text()
+      //item.output = core.parse(item.yr);
+      builtInLib[wrapperName] = item;
+    }
+  }
+  setBuiltInLib();
 
   //const createLog = (text) => {
   //  const parsed = parse(text);