@yr-lang/yr 0.3.15 → 0.4.1

package/lib/@react.yr

@@ -0,0 +1,10 @@
+%%
+
+_@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

@@ -0,0 +1,22 @@
+!! @react
+
+++
+
+_ #root
+
+@@r
+
+_@renderReact('#root') {
+  const [count, setCount] = useState(0);
+  const [message, setMessage] = useState('Loading...');
+  useEffect(() => setMessage(`Count is ${count}`), [count]);
+  return (
+    <div>
+      <h1>Simple React App</h1>
+      <p>{message}</p>
+      <button onClick={() => setCount(count + 1)}>
+        Count: {count}
+      </button>
+    </div>
+  );
+@}

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.3.15",
+  "version": "0.4.1",
   "description": "Yr is a modern structural language and parser",
   "main": "./node.js",
   "exports": {
@@ -10,5 +10,10 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/yr-lang/yr.git"
+  },
+  "dependencies": {
+    "esbuild": "^0.28.2",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
   }
 }

package/yr.js

@@ -36,6 +36,10 @@ const namespaces = {
   '@<': { name: 'jsfooter', parser: 'string', default: '', merge: true },
   '>@': { name: 'wrapperjs', parser: 'string', default: '', merge: true },
   '<@': { name: 'wrapperjscustom', parser: 'string', default: '', merge: true },
+  '@>r': { name: 'jsheaderreact', parser: 'string', default: '', merge: true },
+  '@@r': { name: 'jsreact', parser: 'string', default: '', merge: true },
+  '@<r': { name: 'jsfooterreact', parser: 'string', default: '', merge: true },
+  '<@r': { name: 'wrapperjscustomreact', parser: 'string', default: '', merge: true },
   '""': { name: 'documentation', parser: 'string', default: '' },
   '--': { name: 'modules', parser: 'object', default: [], merge: true },
   '==': { name: 'pixel', parser: 'string', default: '', merge: true },
@@ -69,6 +73,67 @@ for (let item of Object.keys(namespaces)) {
   }
 }
 
+let viewType, scriptUrl, builtInLib = {};
+function transformReact(code, sections, section, config) {
+  code = core.macros(sections, section);
+
+  if (viewType === 'cdn') {
+    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') {
+    for (let item of ['react', 'react-dom']) {
+      if (sections.modules.includes(item)) continue;
+      sections.modules.push(item)
+    }
+    try {
+      const esbuild = require('esbuild');
+      code = "import React from 'react';\n"
+        + "import ReactDOM from 'react-dom/client';\n" + code;
+      const result = esbuild.buildSync({
+        stdin: {
+          contents: code, loader: 'jsx',
+          resolveDir: config.projectPath || process.cwd()
+        },
+        bundle: true, write: false, format: 'iife',
+        nodePaths: [path.join(__dirname, 'node_modules')]
+      });
+      return result.outputFiles[0].text;
+    } catch (error) {
+      console.log(error);
+      const unresolved = error.errors
+        && error.errors.some(item => item.text.startsWith('Could not resolve'));
+
+      if (!unresolved) throw error;
+
+      if (sections) sections.reactBuildFailed = true;
+      return 'alert("esbuild error");';
+    }
+  }
+}
+
 function parseLine(line) {
   const indentation = line.search(/\S/);
 
@@ -628,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) {
@@ -1231,6 +1302,13 @@ const core = {
         if (section === 'macros')
           this.aux(sections, { macrosAux: sections.macrosAux });
 
+        if (section.endsWith('react')) {
+          sections[section.replace(/react/, '')] +=
+            transformReact(sections[section], sections, section, config) + '\n';
+          sections[section] = '';
+          sections.reactUsed = true;
+        }
+
         section = parsers.namespaces[line].name;
         state.sectionChanged = true;
 
@@ -1328,6 +1406,13 @@ const core = {
       lineNumber++;
     }
 
+    if (section.endsWith('react')) {
+      sections[section.replace(/react/, '')] +=
+        transformReact(sections[section], sections, section, config) + '\n';
+      sections[section] = '';
+      sections.reactUsed = true;
+    }
+
     section = false;
 
     if (config.wrapper && sections.wrappersAux
@@ -1812,6 +1897,10 @@ ${sections.pixel}
 <head>
 ${sections.parsedheader}
 ${(config.name) ? `  <link rel="stylesheet" href="./${config.cssname}.css">` : `  <style>\n${sections.parsedcss}\n</style>`}
+${sections.reactUsed && viewType === 'cdn'
+  ? '  <s' + 'cript src="https://unpkg.com/react@18/umd/react.production.min.js"></scri' + 'pt>\n' +
+    '  <s' + 'cript src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></scri' + 'pt>'
+  : ''}
 </head>
 <body style="display: none">
 ${sections.parsedbody}
@@ -1840,12 +1929,44 @@ document.addEventListener('DOMContentLoaded', () => {
   parsers
 };
 
-if (typeof module !== 'undefined' && module.exports)
+if (typeof module !== 'undefined' && module.exports) {
+  viewType = 'npm';
   module.exports = core;
+}
 
 if (typeof window !== 'undefined' && !window.yr) {
-  const parse = core.parse.bind(core);
-  window.yr = parse;
+  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);