feat: 0.0.35 remove some grammar sugar & bugfix

Author: theajack

.eslintignore

@@ -3,4 +3,5 @@ scripts/dev/*.js
 *.html
 **/libs/*.js
 dist
-cdn
+cdn
+*.min.js

packages/client-core/package.json

@@ -3,7 +3,7 @@
     "version": "0.0.34",
     "description": "All-in-js Web UI Framework, No jsx/template/vdom/css/html",
     "main": "src/index.ts",
-    "typings": "dist/alins.d.ts",
+    "typings": "src/index.ts",
     "repository": "git@github.com:alinsjs/alins.git",
     "author": "tackchen <theajack@qq.com>",
     "scripts": {

packages/client-reactive/src/proxy.ts

@@ -17,28 +17,28 @@ import { getCurCleaner } from './cleaner';
 let currentFn: any = null;
 let depReactive = false; // 当前表达式是否依赖响应数据
 
+function execDepFn (fn: ()=>any, curFn: IProxyListener) {
+    currentFn = curFn;
+    depReactive = false;
+    const v = fn();
+    currentFn = null;
+    return v;
+}
+
 export function isDepReactive () {
     return depReactive;
 }
 
-export function observe (fn: ()=>any, listener: IProxyListener) {
+export function observe (fn: () => any, listener: IProxyListener) {
     // if (__DEBUG__) console.log('Start observe', fn, listener);
     if (!listener) listener = fn;
     const origin = listener;
-    listener = (...args) => {
+    listener = () => {
         // ! 动态收集依赖
         // ! fix computed 遇到 && || 时首次运行可能observe不到后面一个响应式数据的问题
-        currentFn = listener;
-        depReactive = false;
-        const result = origin(...args);
-        currentFn = null;
-        return result;
+        return execDepFn(fn, origin);
     };
-    currentFn = listener;
-    depReactive = false;
-    const v = fn();
-    currentFn = null;
-    return v;
+    return execDepFn(fn, listener);
 }
 
 export function isRef (data: any): boolean {

packages/compiler-core/src/parse-utils.ts

@@ -516,6 +516,10 @@ function createNewJSXAttribute (node: JSXAttribute, handleReactive?: boolean) {
     const key = node.name;
     if (key.type === 'JSXNamespacedName') {
         const name = key.namespace.name;
+        if (name === '$') {
+            // ! $:App => $mount='#App'
+            return createJsxAttr('$mount', t.stringLiteral(`#${key.name.name}`));
+        }
         const deco = key.name.name;
         // ! 处理 onclick:stop
         if (isEventEmptyDeco(name, deco, node.value)) {

packages/compiler-web/package.json

@@ -3,7 +3,7 @@
     "version": "0.0.34",
     "description": "All-in-js Web UI Framework, No jsx/template/vdom/css/html",
     "main": "src/index.ts",
-    "typings": "dist/alins-compiler-web.d.ts",
+    "typings": "src/index.ts",
     "repository": "git@github.com:alinsjs/alins.git",
     "author": "tackchen <theajack@qq.com>",
     "scripts": {

packages/compiler-web/src/babel.min.js

@@ -1,3 +1,4 @@
+// ! 模改babel-standalone 目的是为了去掉babel内部自动执行 text/babel 的逻辑
 export default (function(){
     'use strict';
     var exports = {};

scripts/dev/samples/playground.jsx

@@ -1,10 +1,28 @@
+
+// let a = 1; // @reactive
+// let b = false; // @reactive
+
+// <div $mount='#App'
+//     style:color={`${(a > 3 && !b) ? '#f44': '#4f4'}`}
+// >
+//     Hello!
+// </div>
+
+// a ++;
+// a ++;
+// a ++;
+// b = true;
+// // a = true;
+// // b = true;
+// // 预期绿色
+
 let count = 1;
 const countAdd2 = count + 2;
 const countAdd3 = countAdd2 + 1;
 function countMultiply2 () {
     return count * 2;
 }
-<div $mount='#App'>
+<div $:App>
     <button onclick={count++}>
          click:{count}
     </button>

scripts/helper/version.md

@@ -40,9 +40,9 @@
 去除过度的语法糖
 
 - [x] 去除 $$body 简写
-- [ ] 去除 $$ID = $mount='#ID' 的简写
-- [ ] 去除变量命名控制响应式数据 保留注释和js label
-- [ ] 去除
+- [x] 去除 $$ID = $mount='#ID' 的简写 
+- [x] 去除变量命名控制响应式数据 保留注释和js label
+- [x] $$ID => $:ID 简写
 
 ## 0.0.33 - 0.0.34
 

scripts/test/demos.tsx

@@ -607,16 +607,18 @@ function lifeLabel () {
     }}/>;
 }
 
-
-{/* <div $$App
-    style:color={`${(a && !b) ? '#f44': '#4f4'}`}
->
-    Hello!
-</div> */}
-
-/**
- * todo 有bug
-a.v = true;
-b.v = true;
-b.v = false
- */
+function doubleAnd(){
+
+    let a = false; // @reactive
+    let b = false; // @reactive
+    
+    <div $mount='#App'
+        style:color={`${(a && !b) ? '#f44': '#4f4'}`}
+    >
+        Hello!
+    </div> 
+
+    a = true;
+    b = true;
+    // 预期绿色
+}