@yr-lang/yr 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,10 +1,16 @@
 # Changelog
 
+## [0.4.0] - 2026-08-18
+
+Added React sections: `@@r`, `@@r`, `@<r`
+
+See `/tests/Yrci/React.yr` to see an example
+
 ## [0.3.0] - 2026-04-27
 
-Remove `wrapperheader`, `header`, `scripts` and `footer` from parsedYr
-Created `wrapperheader` sections
-Added `VOID_TAGS` in order to not add elementId to all elements `if (preview === true)`
+* Remove `wrapperheader`, `header`, `scripts` and `footer` from parsedYr
+* Created `wrapperheader` sections
+* Added `VOID_TAGS` in order to not add elementId to all elements `if (preview === true)`
 
 ## [0.2.0] - 2026-03-01
 

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/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/node.js

@@ -501,7 +501,7 @@ for (let item of ['HOME', 'LIBS', 'BUILDS', 'TREE', 'CONFIG']) {
         env.BUILDS, projectPath,
         `${projectPath}/www`, `${projectPath}/www/assets`,
         `${projectPath}/app`, `${projectPath}/app/assets`,
-        `${projectPath}/actions`
+        `${projectPath}/actions`, `${projectPath}/bin`
       ]) { if (!fs.existsSync(item)) fs.mkdirSync(item, { recursive: true }); }
 
       fs.writeFileSync(projectPath + '/.gitignore', `*/node_modules/
@@ -527,6 +527,17 @@ package*.json
       fs.writeFileSync(`${projectPath}/requirements.txt`, requirements);
 
       for (let item in result.devops) {
+        if (result.devops[item].split('\n')[0].endsWith('cpp')) {
+          let _code = result.devops[item].split('\n');
+          _code.shift();
+          _code = _code.join('\n').trim();
+          let filename = item;
+          if (!filename.endsWith('.cpp')) filename += '.cpp';
+          const srcPath= `${projectPath}/bin/${item}.cpp`;
+          fs.writeFileSync(srcPath, _code);
+          spawn('g++', [srcPath, '-o', `${projectPath}/bin/${item}.exe`, '-O2']);
+          continue;
+        }
         fs.writeFileSync(`${projectPath}/actions/${item}`, result.devops[item])
         spawn('chmod', ['+x', `${projectPath}/actions/${item}`]);
       }

package/package.json

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

package/tests/.yrrc

@@ -0,0 +1,2 @@
+NAME=yrtests
+DESCRIPTION=Built-in yr tests

package/{lib → tests}/Yrci/A1.yr

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

package/{lib → tests}/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/yr.js

@@ -40,6 +40,14 @@ const namespaces = {
   '@@r': { name: 'jsreact', parser: 'string', default: '', merge: true },
   '@<r': { name: 'jsfooterreact', parser: 'string', default: '', merge: true },
   '<@r': { name: 'wrapperjscustomreact', parser: 'string', default: '', merge: true },
+  '@@t':  { name: 'jsts',  parser: 'string', default: '', merge: true },
+  '@>t':  { name: 'jsheaderts', parser: 'string', default: '', merge: true },
+  '@<t':  { name: 'jsfooterts', parser: 'string', default: '', merge: true },
+  '<@t': { name: 'wrapperjscustomts', parser: 'string', default: '', merge: true },
+  '@@x':  { name: 'jstsx', parser: 'string', default: '', merge: true },
+  '@>x':  { name: 'jsheadertsx', parser: 'string', default: '', merge: true },
+  '@<x':  { name: 'jsfootertsx', parser: 'string', default: '', merge: true },
+  '<@x': { name: 'wrapperjscustomtsx', parser: 'string', default: '', merge: true },
   '""': { name: 'documentation', parser: 'string', default: '' },
   '--': { name: 'modules', parser: 'object', default: [], merge: true },
   '==': { name: 'pixel', parser: 'string', default: '', merge: true },
@@ -73,27 +81,92 @@ for (let item of Object.keys(namespaces)) {
   }
 }
 
-let viewType;
-function transformReact(code, sections, section, config) {
-  code = module.exports.macros(sections, section);
+let viewType, scriptUrl, builtInLib = {};
+
+const JS_KINDS = {
+  react: {
+    suffix: 'react',
+    loader: 'jsx',
+    babelPresets: [['react', { runtime: 'classic' }]],
+    modules: ['react', 'react-dom'],
+    npmImports: "import React from 'react';\nimport ReactDOM from 'react-dom/client';\n",
+    cdnShimModules: {
+      'react': 'window.React',
+      'react-dom': 'window.ReactDOM',
+      'react-dom/client': 'window.ReactDOM'
+    }
+  },
+  ts: {
+    suffix: 'ts',
+    loader: 'ts',
+    babelPresets: ['typescript'],
+    modules: [],
+    npmImports: '',
+    cdnShimModules: {}
+  },
+  tsx: {
+    suffix: 'tsx',
+    loader: 'tsx',
+    babelPresets: [['react', { runtime: 'classic' }], 'typescript'],
+    modules: ['react', 'react-dom'],
+    npmImports: "import React from 'react';\nimport ReactDOM from 'react-dom/client';\n",
+    cdnShimModules: {
+      'react': 'window.React',
+      'react-dom': 'window.ReactDOM',
+      'react-dom/client': 'window.ReactDOM'
+    }
+  }
+};
+
+function transformJS(code, kind, sections, section, config) {
+  const spec = JS_KINDS[kind];
+  if (!spec) throw `Yr: tipo desconhecido em transformJS: ${kind}`;
+
+  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 (${kind})");`;
+
+    const needsShim = Object.keys(spec.cdnShimModules).length > 0;
+    const plugins = needsShim ? ['transform-modules-commonjs'] : [];
+
+    const transformed = window.Babel.transform(code, {
+      presets: spec.babelPresets, plugins,
+      filename: `file.${kind === 'react' ? 'jsx' : kind}`
+    }).code;
+
+    if (!needsShim) return transformed; // ts puro não importa nada shimável, não precisa embrulhar
+
+    const shimEntries = Object.entries(spec.cdnShimModules)
+      .map(([name, ref]) => `'${name}': ${ref}`).join(',\n          ');
+
+    const shim = `
+      const require = (function () {
+        const modules = { ${shimEntries} };
+        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']) {
+    for (let item of spec.modules) {
       if (sections.modules.includes(item)) continue;
-      sections.modules.push(item)
+      sections.modules.push(item);
     }
+
     try {
       const esbuild = require('esbuild');
-      code = "import React from 'react';\n"
-        + "import ReactDOM from 'react-dom/client';\n" + code;
+      code = spec.npmImports + code;
       const result = esbuild.buildSync({
         stdin: {
-          contents: code, loader: 'jsx',
+          contents: code, loader: spec.loader,
           resolveDir: config.projectPath || process.cwd()
         },
         bundle: true, write: false, format: 'iife',
@@ -108,7 +181,7 @@ function transformReact(code, sections, section, config) {
       if (!unresolved) throw error;
 
       if (sections) sections.reactBuildFailed = true;
-      return '';
+      return `alert("esbuild error (${kind})");`;
     }
   }
 }
@@ -672,6 +745,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) {
@@ -1275,12 +1354,16 @@ 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;
-        }
+for (let kind in JS_KINDS) {
+  const suffix = JS_KINDS[kind].suffix;
+  if (section.endsWith(suffix)) {
+    sections[section.slice(0, -suffix.length)] +=
+      transformJS(sections[section], kind, sections, config) + '\n';
+    sections[section] = '';
+    if (JS_KINDS[kind].modules.includes('react')) sections.reactUsed = true;
+    break;
+  }
+}
 
         section = parsers.namespaces[line].name;
         state.sectionChanged = true;
@@ -1379,12 +1462,16 @@ const core = {
       lineNumber++;
     }
 
-    if (section.endsWith('react')) {
-      sections[section.replace(/react/, '')] +=
-        transformReact(sections[section], sections, section, config) + '\n';
-      sections[section] = '';
-      sections.reactUsed = true;
-    }
+for (let kind in JS_KINDS) {
+  const suffix = JS_KINDS[kind].suffix;
+  if (section.endsWith(suffix)) {
+    sections[section.slice(0, -suffix.length)] +=
+      transformJS(sections[section], kind, sections, config) + '\n';
+    sections[section] = '';
+    if (JS_KINDS[kind].modules.includes('react')) sections.reactUsed = true;
+    break;
+  }
+}
 
     section = false;
 
@@ -1910,6 +1997,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);