@yr-lang/yr 0.3.12 → 0.4.0

package/lib/@react.yr

@@ -0,0 +1,7 @@
+%%
+
+_@renderReact(#query) {
+  ReactDOM.createRoot(document.querySelector(#query)).render(
+    ___
+  );
+@}

package/lib/Yrci/React.yr

@@ -0,0 +1,29 @@
+!! @react
+
+++
+
+_ #root
+
+@@r
+
+import { useState, useEffect } from "react";
+function App() {
+  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>
+  );
+}
+
+_@renderReact('#root') {
+  <App />
+@}

package/node.js

@@ -127,7 +127,7 @@ module.exports = {
     let result = '';
     if (extensions) result += extensions + '\n';
 
-    for (let item of ['nosection', 'extensions']) {
+    for (let item of ['nosection', 'extensions', 'pixel']) {
       if (sections[item]) {
         result += sections[item] + '\n';
         delete sections[item];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yr-lang/yr",
-  "version": "0.3.12",
+  "version": "0.4.0",
   "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,46 @@ for (let item of Object.keys(namespaces)) {
   }
 }
 
+let viewType;
+function transformReact(code, sections, section, config) {
+  code = module.exports.macros(sections, section);
+
+  if (viewType === 'cdn') {
+    if (!window.Babel) throw 'Babel unavailable';
+    return window.Babel.transform(code, { presets: ['react'] }).code;
+  }
+
+  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 '';
+    }
+  }
+}
+
 function parseLine(line) {
   const indentation = line.search(/\S/);
 
@@ -1231,6 +1275,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 +1379,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 +1870,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 +1902,14 @@ 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);
 
   //const createLog = (text) => {
   //  const parsed = parse(text);