ecomfe / san-loader Goto Github PK

San-Loader 是基于 webpack 的工具，允许开发者书写 San 单文件的方式来进行组件开发。

JavaScript 100.00%

san-loader's Issues

Could not build with babel@7 without sourcemap

When devtool is not enabled, webpack will throw an error like following:

ERROR in ./node_modules/babel-loader/lib!./node_modules/san-loader/lib/selector.js?type=script&index=0!./src/views/Home.san
Module build failed: Error: .inputSourceMap must be a boolean, object, or undefined
    at assertInputSourceMap (/local/GitHub/san-study/node_modules/@babel/core/lib/config/validation/option-assertions.js:43:11)
    at /local/GitHub/san-study/node_modules/@babel/core/lib/config/validation/options.js:83:20
    at Array.forEach (<anonymous>)
    at validate (/local/GitHub/san-study/node_modules/@babel/core/lib/config/validation/options.js:61:21)
    at loadConfig (/local/GitHub/san-study/node_modules/@babel/core/lib/config/index.js:37:48)
    at transformSync (/local/GitHub/san-study/node_modules/@babel/core/lib/transform-sync.js:13:36)
    at Object.transform (/local/GitHub/san-study/node_modules/@babel/core/lib/transform.js:20:65)
    at transpile (/local/GitHub/san-study/node_modules/babel-loader/lib/index.js:55:20)
    at Object.module.exports (/local/GitHub/san-study/node_modules/babel-loader/lib/index.js:179:20)
 @ ./src/views/Home.san 5:17-119
 @ ./src/router/index.js
 @ ./src/index.js

Reproduction: https://github.com/JounQin/san-study/blob/master/webpack.config.babel.js
Step:

Run yarn && yarn build, it works with sourcemap.
Then remove devtool option in webpack config, rerun yarn build you will get the error in console.

通过san-cli 编译，CSS Modules 报错

1、通过san-cli创建的demo项目
2、使用的官方示例：

<template>
    <div class="{{$style.wrapper}}"></div>
</template>

<script>
    export default {
        attached() {
            let style = this.data.get('$style');
            console.log(style);
        }
    };
</script>
<!-- 当style标签不添加module时，san serve编译正常 -->
<!-- 添加module后，编译不通过 -->
<style module>
    .wrapper {
        color: black;
    }
</style>

3、在san.config.js中，添加loader配置(直接贴的示例代码)：

 configWebpack: config => {
        config.module.rules.push({
            test: /\.css$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        modules: {
                            localIdentName: '[local]_[hash:base64:5]'
                        },
                        localsConvention: 'camelCase',
                        sourceMap: true
                    }
                }
            ]
        })
    },

报错：ERROR css-loader#module not set, required by /xxx/xxx/app.san?lang=css&module=&san=&type=style&index=0

san-loader不支持动画

san3.4.2以及之前对动画支持不是很好。对比下vue-loader,san-loader在style内使用css keyframe好像是不支持的。

支持mixin和注册全局component的san loader

我实现了一个支持mixin和注册全局component的san loader，地址https://www.npmjs.com/package/san-loader-plus。基于san-loader和san-mixin实现的。

数据校验的写法是怎样的？

如题，DataTypes在单文件export {} (非export class）写法中支持么？
支持的话，语法是怎样的？

vue在import .vue组件时，语法层面可以省略.vue后缀，而san-loader不能省略.san后缀

vue直接支持import './components/Hello.vue'和import './components/Hello'，
而san只支持import './components/Hello.san', 不支持import './components/Hello'。
当然可以在webpack中的resolve.extensions中把.san加上去。但是vue默认就支持，san可不可以也改成默认支持呢？

bug

ERROR in Loader /Users/liuyiman/privatespace/san-test/todos-esnext/node_modules/san/dist/san.ssr.js didn't return a function
 @ ./src/main.js 19:16-44

当我使用.san文件的时候，会出现这个错误

node: 8.4.0
npm: 5.6
san: 3.3.2

支持pug

.san的template指定lang并添加相应的loader后，san-cli仍旧无法编译通过
是不是现在不支持template的lang属性？vue是可以的

使用 scoped css 时，scoped id 没有作为 attribute 写回 DOM Element。

问题

在使用 .san 组件时，scoped style 生成了一个 id，这个 id 写入了 style 标签，但没有写回这个 style 对应的 DOM Element。

复现用例

<template>
<span class="foo">foo</span>
</template>

<style scoped>
.foo {
  display: none;
}
</style>

输出

期望输出

<style>
.foo[_s_HASH_OF_COMPONENT] { display: none; }
</style>
...
<span class="foo" _s_HASH_OF_COMPONENT>foo</span>

实际输出

<style>
.foo[_s_HASH_OF_COMPONENT] { display: none; }
</style>
...
<span class="foo">foo</span>

配置了 compileTemplate 是 aPack 或 aNode 后，渲染时候组件外层绑定的 style/class/id 没有渲染到 DOM 上

Case

组件 Parent：

<template>
    <div>
        <child class="{{$style.child}}"></child>
    </div>
</template>

<style module>
.child {
    background: red;
}
</style>

组件 Child：

<template>
    <div>child</div>
</template>
</style>

san-loader 配置：

config.module
    .rule('san')
    .test(/\.san$/)
    .use('san-loader')
    .loader('san-loader')
    .options({
        compileTemplate: 'aPack'
    })
    .end();

运行时打断点查看 Child 组件的 aNode：

compileTemplate: 'aPack' 时 aNode：

{
  "directives": {
  },
  "props": [
  ],
  "events": [
  ],
  "children": [
    {
      "textExpr": {
        "type": 1,
        "value": "child"
      }
    }
  ],
  "tagName": "div"
}

compileTemplate: 'none' 时 aNode：

{
  "directives": {
  },
  "props": [
    {
      "name": "class",
      "expr": {
        "type": 5,
        "expr": {
          "type": 4,
          "paths": [
            {
              "type": 1,
              "value": "class"
            }
          ]
        },
        "filters": [
          {
            "type": 6,
            "args": [
            ],
            "name": {
              "type": 4,
              "paths": [
                {
                  "type": 1,
                  "value": "_class"
                }
              ]
            }
          }
        ]
      }
    },
    {
      "name": "style",
      "expr": {
        "type": 5,
        "expr": {
          "type": 4,
          "paths": [
            {
              "type": 1,
              "value": "style"
            }
          ]
        },
        "filters": [
          {
            "type": 6,
            "args": [
            ],
            "name": {
              "type": 4,
              "paths": [
                {
                  "type": 1,
                  "value": "_style"
                }
              ]
            }
          }
        ]
      }
    },
    {
      "name": "id",
      "expr": {
        "type": 4,
        "paths": [
          {
            "type": 1,
            "value": "id"
          }
        ]
      }
    }
  ],
  "events": [
  ],
  "children": [
    {
      "textExpr": {
        "type": 1,
        "value": "child"
      }
    }
  ],
  "tagName": "div"
}

相比之下，使用 san-loader 不编译 template 比编译 template 的 aNode 多出了 props 的内容：加上了 style / class / id 相关的内容。

分析

san-loader 中会调 san-anode-utils 的 parseTemplate 方法得到 aNode。代码：https://github.com/ecomfe/san-loader/blob/f0fbbef2c0/lib/loader.js#L90
san 运行时里面解析 template 的方法不一样，san 里用的是 parseComponentTemplate。代码：https://github.com/baidu/san/blob/master/src/view/parse-component-template.js#L53
parseComponentTemplate 和 parseTemplate 会多一个 autoFillStyleAndId 的方法，导致组件外层绑定 style/class/id 在渲染时候没有渲染到 DOM 上

希望可以支持强制返回未编译的 template 功能

需求场景

san-ssr-plugin 插件中，会利用 san-loader 的机制获取 template 部分内容。方法是调用 loadModule 方法发起这样一次资源请求：index.san?lang=html&san=&type=template

问题

当 compileTemplate 选项为 aNode 或 aPack 时，会返回编译后的结果。预期是得到未编译的 template 字符串。

需求

希望可以通过增加 query 的方式，强制返回未编译的 template 字符串。例如：index.san?lang=html&san=&type=template&compileTemplate=

目前 query 上的 compileTemplate 参数，只有值为 aPack 或 aNode 的时候有效果：

https://github.com/ecomfe/san-loader/blob/master/lib/loader.js#L84

可以不可以放开？

数据绑定问题？

export default {
data: {
msg: 'world'
}
}
是不是因该是：
export default {
initData() {
return {
name: 'walker'
}
}
}

San模板编译时使用css module 未生效

<template>
    <div class="{{style.box}}">
    </div>
</template>
<script>

export default {
    computed: {
    }
}
</script>
<style module="style">
    .box {
        width: 100px;
        height: 100px;
        background-color: brown;
    }
</style>

在包含 computed 属性时，san component优先使用自身属性，忽略了类静态属性
https://github.com/baidu/san/blob/3.10.2/src/view/component.js#L87

san issues baidu/san#503

README.md例子错误

<script>
    export default {
        data: {
            msg: 'world'
        }
    }
</script>

在script中应该为

    export default {
        initData() {
            return {
                name: 'San'
            }
        }
    }

Scoped CSS 的 descendant, child selectors 优先级

输入

<style scoped>
.a .b .c {
    color: red
}
</style>

输出

1. 向下兼容

.a[913ce72] .b .c {
    color: red
}

场景： slot 与第三方库

.container[913ce72] .slick-list {}

2. 向上兼容

.a .b .c[913ce72] {
    color: red
}

场景：全局主题

.theme-blue .button[913ce72] {}

问题

1 和 2 需要做一个选择, 收集大家的建议

或者，有更优的方案？

san单文件组件行内样式的写法在生产模式下无效

环境：webpack+san-loader 0.2.0
<div class="bottom-panel-component panel-component" style="height:{{height}};">
.san单文件，这种写法在开发模式下可以用，build之后就不能用了，style="height:{{height}};"不生效

Html-Loader造成的编译异常

异常情况

会有类似Cannot read properties of undefined (reading 'is')的异常，通过debug排查
具体问题出现在以下位置

preheatANode(proto.aNode, this);

    this.tagName = proto.aNode.tagName;
    this.source = typeof options.source === 'string'
        ? parseTemplate(options.source).children[0]
        : options.source;
    // 这个方法传入的this.source为undefined
    preheatANode(this.source);
    proto.aNode._i++;

解决方法，初步设想是loader的问题，最终定位到html-loader与babel-loader

需要将html-loader的esModule设为false即可
如果使用babel-loader, 需要exclude中添加san的过滤

package.json

{
  "dependencies": {
    "san": "^3.11.1"
  },
  "devDependencies": {
    "babel-loader": "^8.0.6",
    "html-loader": "^3.0.1",
    "san-loader": "^0.3.3"
  },
  "browserslist": "> 0.25%, not dead"
}

webpack.config.js

module.exports = (env, argv) => {
  return {
    plugins: [
      new SanLoaderPlugin()
    ],
    module: {
      rules: [
         {
          test: /\.san$/,
          use: [
            { loader: 'san-loader' }
          ]
        },
        {
          test: /\.js?$/,
          // 去除san
          exclude: /(node_modules|bower_components|.*\.san)/,
          loader: 'babel-loader'
        },
        {
          test: /\.html$/,
          loader: 'html-loader',
          options: {
            // 两个参数改为false
            esModule: false,
            minimize: false
          }
        }
      ]
    }
  }
}

如果有碰到类似问题的，希望能有帮助