@makano/rew 1.3.1 → 1.3.2

package/lib/rew/modules/compiler.js

@@ -27,24 +27,21 @@ function tokenizeCoffeeScript(code) {
     const nextNextChar = code[i + 2];
 
     if (char === '#') {
-      // Comment
       const commentEnd = code.indexOf('\n', i);
       const comment = code.substring(i, commentEnd < 0 ? code.length : commentEnd + 1);
       tokens.push({ type: 'COMMENT', value: comment });
       i += comment.length - 1;
     } else if (char === '"' && nextChar === '"' && nextNextChar === '"') {
-      // Triple-quoted string
       let string = '"""';
       i += 3;
       while (i < code.length && !(code[i] === '"' && code[i + 1] === '"' && code[i + 2] === '"')) {
         string += code[i];
         i++;
       }
-      string += '"""'; // Include closing triple quotes
+      string += '"""';
       tokens.push({ type: 'TRIPLE_STRING', value: string });
-      i += 2; // Skip past the closing triple quotes
+      i += 2;
     } else if (char === '"' || char === "'") {
-      // Single or double-quoted string
       let string = char;
       let escaped = false;
       i++;
@@ -57,10 +54,9 @@ function tokenizeCoffeeScript(code) {
         }
         i++;
       }
-      string += char; // Include closing quote
+      string += char;
       tokens.push({ type: 'STRING', value: string });
     } else if (char === '/' && nextChar !== ' ' && nextChar !== '/' && nextChar !== '*' && prevChar !== '<') {
-      // Regular expression
       let regex = char;
       i++;
       while (i < code.length && (code[i] !== '/' || regex.endsWith('\\'))) {
@@ -70,14 +66,12 @@ function tokenizeCoffeeScript(code) {
       regex += '/';
       tokens.push({ type: 'REGEX', value: regex });
     } else if (/\s/.test(char)) {
-      // Whitespace
       if (tokens[tokens.length - 1]?.type === 'WHITESPACE') {
         tokens[tokens.length - 1].value += char;
       } else {
         tokens.push({ type: 'WHITESPACE', value: char });
       }
     } else if (/[a-zA-Z_$@]/.test(char)) {
-      // Identifier
       let identifier = char;
       i++;
       while (i < code.length && /[a-zA-Z0-9_$]/.test(code[i])) {
@@ -85,18 +79,17 @@ function tokenizeCoffeeScript(code) {
         i++;
       }
       tokens.push({ type: 'IDENTIFIER', value: identifier });
-      i--; // Move back one character to recheck
-    } else if (/[a-f0-9.n]/.test(char)) {
+      i--;
+    } else if (/[a-f0-9.xn]/.test(char)) {
       let num = char;
       i++;
-      while (i < code.length && /[a-f0-9.n]/.test(code[i])) {
+      while (i < code.length && /[a-f0-9.nx]/.test(code[i])) {
         num += code[i];
         i++;
       }
       tokens.push({ type: 'NUMBER', value: num });
-      i--; // Move back one character to recheck
+      i--;
     } else {
-      // Other characters
       tokens.push({ type: 'OTHER', value: char });
     }
     i++;
@@ -397,7 +390,7 @@ function compileRewStuff(content, options) {
 		}
 
 
-		if (token.type === 'IDENTIFIER' && token.value === 'export' && !options.keepImports) {
+		if (tokens[i-1]?.value !== '.' && token.type === 'IDENTIFIER' && token.value === 'export' && !options.keepImports) {
 			token.value = 'pub';
 			straceLog('EXPORT() => TRANSLATING TO pub');
 		}
@@ -421,7 +414,7 @@ function compileRewStuff(content, options) {
 			}
 		}
 
-		if (token.type === 'IDENTIFIER' && token.value === 'using' && !options.disableUse) {
+		if (tokens[i-1]?.value !== '.' && token.type === 'IDENTIFIER' && token.value === 'using' && !options.disableUse) {
 			straceLog('USING()');
 			const next = nextToken.value;
 			if(next in USING_DEFAULT) {
@@ -448,7 +441,7 @@ function compileRewStuff(content, options) {
 			}
 		}
 
-		if (token.type === 'IDENTIFIER' && token.value === 'import' && !options.keepImports) {
+		if (tokens[i-1]?.value !== '.' && token.type === 'IDENTIFIER' && token.value === 'import' && !options.keepImports) {
 			// console.log(nextToken.type);
 			straceLog('IMPORT()');
 			straceLog('==> WARN: SLOWS DOWN COMPILATION');
@@ -539,7 +532,7 @@ function compileRewStuff(content, options) {
 			continue;
 		}
 
-		if (token.type === 'IDENTIFIER' && (token.value === 'imp' || token.value === 'inc')) {
+		if (tokens[i-1]?.value !== '.' && token.type === 'IDENTIFIER' && (token.value === 'imp' || token.value === 'inc')) {
 			straceLog('IMP() Detected');
 			let { token: t1 } = gnextToken(i, 1, tokens) || {};
 			let { token: t2 } = gnextToken(i, 2, tokens) || {};
@@ -559,6 +552,7 @@ function compileRewStuff(content, options) {
 		}
 
 		if (
+			tokens[i-1]?.value !== '.' &&
 			token.type === 'IDENTIFIER' &&
 			token.value === 'pub' &&
 			nextToken &&

package/lib/rew/pkgs/serve.js

@@ -166,9 +166,9 @@ module.exports = (context) => {
 
   render = (req, data) -> 
     target = renderers.pop()
-    page = target.render req, data
+    page = target.render.call @, req, data
     for renderer in renderers
-      page = renderer.render req, data, page
+      page = renderer.render.call @, req, data, page
     page
 
   exports { render, staticRendering }
@@ -241,7 +241,8 @@ module.exports = (context) => {
         const layouts = findLayoutFiles(file, root, false);
         const fileContext = runPath(file, { code: ssrBundlerEntry(file, layouts) }).context.module.exports || {};
         if(typeof fileContext.render !== "function") throw new ReferenceError("Route does not export function render");
-        let pageContent = fileContext.render(req, { page, ...getReqProps(req) });
+        const props = { page, ...getReqProps(req) };
+        let pageContent = fileContext.render.call(props, req, props);
         if(fileContext.staticRendering) staticRendering = true;
         if(!w.isNode(pageContent)) throw new TypeError("Route.render does not return an element");
         if(pageContent?.type?.element == 'head'){

package/lib/rew/pkgs/web.js

@@ -245,6 +245,95 @@ function renderToString(element, js = false) {
   return js ? js === 'raw' ? eltJSON : JSON.stringify(eltJSON) : element instanceof TextNode ? `${type.text}` : `<${type.element}${propsString}>${selfClosingElements.has(type.element) ? '' : childrenHTML}${selfClosingElements.has(type.element) ? '' : `</${type.element}>`}`;
 }
 
+function createStyles(styles) {
+  let css = "";
+  const variables = {};
+  const mixins = {};
+
+  const parseValue = (v, self, name, vars) => {
+    const vs = {...variables, ...vars, name, ...Object.fromEntries(Object.entries(self).map(i => ['prop_'+i[0], i[1]]))};
+    return v.startsWith('@v') ? vs[v.split('@v')[1].trim()] : v
+  .toString()
+  .replace(/\$([A-Za-z0-9-_]+)/g, (_, name) => (vs)[name])
+  }
+
+  const declectProp = (value, name, selector, start, parent, self, vars = {}) => {
+    let prop = `${name}: `;
+    self.__parent = parent;
+    if (typeof value == 'object') {
+      prop += parseValue(value.default || 'unset', self, name, vars) + ';';
+      prop += '}\n';
+      for (let state in value) {
+        if (state == 'default') continue;
+        else if (state.startsWith('@media')) {
+          prop += `${state} { ${start} ${name}: ${parseValue(value[state], self, name, vars)}; } }\n`
+        } else if (state.startsWith(':')) {
+          prop += `${selector}${state} { ${name}: ${parseValue(value[state], self, name, vars)}; }\n`
+        }
+      }
+      prop += start;
+    } else {
+      let v = parseValue(value, self, name, vars);
+      if(typeof v == 'object') return declectProp(v, name, selector, start, parent, self, vars);
+      prop += v + ';';
+    }
+    return prop;
+  }
+
+  const declectNames = (names, $name, parent, values = {}) => {
+    const start = $name ? $name + ' {' : '';
+    let nameStyles = start;
+    for (let name in names) {
+      let selector = name.replace(/,/g, ', &').replace(/&/g, $name || '');
+      if (name == '@variables') {
+        for (let i in names[name]) {
+          variables[i] = names[name][i];
+        }
+      } else if (name.startsWith('@mixin')) {
+        const mame = name.split('@mixin')[1].trim();
+        const mname = mame.split('(')[0];
+        const args = mame.replace(mname, '').slice(1, -1);
+        mixins[mname] = {
+          args: args.split(','),
+          value: names[name]
+        }
+      } else if (name.startsWith('@keyframes')) {
+        nameStyles += $name ? '' : name + '{';
+
+        for(let keyFrame in names[name]){
+          nameStyles += declectNames(names[name][keyFrame], keyFrame, names[name], values);
+        }
+
+        if(!$name) nameStyles += '}\n';
+      } else if ($name) {
+        if (name.startsWith('&')) {
+          nameStyles += '}\n';
+          nameStyles += declectNames(names[name], selector, names, values);
+          nameStyles += start;
+        } else if(name.startsWith('@include')) {
+          const mame = names[name];
+          const mname = mame.split('(')[0];
+          const args = mame.replace(mname, '').slice(1, -1).split(',');
+          if(mixins[mname]){
+            nameStyles += declectNames(mixins[mname].value, selector, names, {...values, ...Object.fromEntries(mixins[mname].args.map((n, i) => [n, args[i]]))}).trim().replace('@include ', '').slice(1, -1);
+          }
+        } else {
+          nameStyles += declectProp(names[name], name, $name, start, parent || styles, names, values);
+        }
+      } else {
+        nameStyles += declectNames(names[name], selector, names, values);
+      }
+    }
+    if ($name) nameStyles += '}\n';
+    return nameStyles;
+  }
+
+  css += declectNames(styles);
+
+  return css.replace(/(.+) \{\}/g, '');
+}
+
+
 class Page extends Node {
   constructor() {
     super();
@@ -270,6 +359,8 @@ class Page extends Node {
   style(styleString) {
     if (typeof styleString == "object" && styleString.href)
       return this.head.add(createElement('link', { href: styleString.href, rel: 'stylesheet' }));
+    else if(typeof styleString == "object")
+      return this.head.add(createElement('style', null, createTextNode(createStyles(styleString))))
     else
       return this.head.add(createElement('style', null, createTextNode(styleString)));
   }
@@ -301,13 +392,17 @@ class Page extends Node {
     ${State}
     const states = [];
 
+    function styleAttribute(value, el){
+      for(let i in value){
+        const v = value[i];
+        el.style.setProperty(i, value[i]);
+      }
+    }
+
     function setAttribute(el, key, value){
       let defVal = value;
       if(key == 'style'){
-        for(let i in value){
-          const v = value[i];
-          el.style.setProperty(i, value[i]);
-        }
+        styleAttribute(value, el);
         return;
       } else if(key.startsWith('on')){
         if(!el.listeners) el.listeners = [];
@@ -453,12 +548,21 @@ module.exports = (context, importOptions) => {
     createElement(...args) {
       return createElement(...args);
     }
+    createStyles(...args){
+      return createStyles(...args);
+    }
     state(value) {
       return new State(value);
     }
     invokeState(states, callback){
       const statesMapped = states.map(i => i instanceof State ? `getState('${i.id}')` : (typeof i == "function" ? i.toString() : JSON.stringify(i)));
-      return `((${callback})(event, ...[${statesMapped}]))`;
+      return `((${callback})(typof event !== "undefined" ? event : null, ...[${statesMapped}]))`;
+    }
+    async bundleCode(code, options){
+      return Web.prototype.bundle(generateRandomID(), {
+        ...options,
+        code
+      });
     }
     async bundle(filepath, options = {}) {
       const virtualModuleId = `virtual:${filepath}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makano/rew",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "A simple coffescript runtime and app manager",
   "main": "main.js",
   "directories": {

package/runtime.d.ts

@@ -500,6 +500,7 @@ declare namespace Rew {
     add(...children: nodable[]): typeof this.body;
   
     script(script: string): ReturnType<typeof this.add>;
+    style(style: string | Record<string, any>): ReturnType<typeof this.add>;
   
     serializeState(): string;
   
@@ -522,11 +523,13 @@ declare namespace Rew {
   
     createText(text: string): Node;
     createElement(...args: any[]): ElementNode;
+    createStyles(styles: Record<string, any>): string;
   
     state(value): ModuleWebState | any;
     // @ts-ignore
     invokeState(states: State[], callback: CallableFunction): any;
   
+    bundleCode(code: string, options?: Record<string, any>): string;
     bundle(filePath: string, options?: Record<string, any>): string;
   }
   
@@ -1006,16 +1009,16 @@ declare namespace Rew {
     group(...group: any[]): { g: T, with: (props: any) => { g: T, [key: string]: any }, [key: string]: any }
   }
 
-  declare const std = {
-    curl: curl,
-    int: int,
-    str: str,
-    bool: bool,
-    float: float,
-    num: num,
-    typeis: typeis,
-    typex: typex,
-    typei: typei,
+  declare const std: {
+    curl: typeof curl,
+    int: typeof int,
+    str: typeof str,
+    bool: typeof bool,
+    float: typeof float,
+    num: typeof num,
+    typeis: typeof typeis,
+    typex: typeof typex,
+    typei: typeof typei,
 
     prototype: {
       void: () => void 0,