wip(app): nvue

packages/uni-cli-nvue/dist/utils/index.js

+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./path"), exports);
+__exportStar(require("./style"), exports);

packages/uni-cli-nvue/dist/utils/preprocess.js

+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizePreprocessErrMsg = void 0;
+const path_1 = __importDefault(require("path"));
+const uni_cli_shared_1 = require("@dcloudio/uni-cli-shared");
+const TIPS = `条件编译失败,参考示例(注意 ifdef 与 endif 必须配对使用):`;
+const ERRORS = {
+    html: `${TIPS}
+  <!--  #ifdef  %PLATFORM% -->
+  模板代码
+  <!--  #endif -->
+  `,
+    js: `${TIPS}
+  // #ifdef  %PLATFORM%
+  js代码
+  // #endif
+  `,
+    css: `${TIPS}
+  /*  #ifdef  %PLATFORM%  */
+  css代码
+  /*  #endif  */
+  `,
+    json: `${TIPS}
+  // #ifdef  %PLATFORM%
+  json代码
+  // #endif
+  `,
+};
+function normalizePreprocessErrMsg(type, filepath) {
+    return `${ERRORS[type]} at ${uni_cli_shared_1.normalizePath(path_1.default.relative(process.env.UNI_INPUT_DIR, filepath))}:1`;
+}
+exports.normalizePreprocessErrMsg = normalizePreprocessErrMsg;

packages/uni-cli-nvue/dist/utils/style.js

+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.genStyle = void 0;
+const path_1 = __importDefault(require("path"));
+const uni_cli_shared_1 = require("@dcloudio/uni-cli-shared");
+// @todo:
+// font-relative lengths: em, ex, ch, ic
+// viewport-relative lengths: vi, vb
+// https://drafts.csswg.org/css-values/#lengths
+const REGEXP_LENGTH = /^([-+]?[0-9]*\.?[0-9]+)(rem|vw|vh|vmin|vmax|cm|mm|q|in|pt|pc|px)$/;
+function convertLength(k, v) {
+    if (typeof v !== 'string') {
+        return v;
+    }
+    const result = v.match(REGEXP_LENGTH);
+    if (result) {
+        if (result[2] === 'px') {
+            return result[1];
+        }
+        return result[1] + 'CSS_UNIT_' + result[2].toUpperCase();
+    }
+    return v;
+}
+let isFirst = true;
+function genStyle(input, loader) {
+    let output = '{}';
+    const resourcePath = uni_cli_shared_1.normalizePath(path_1.default.relative(process.env.UNI_INPUT_DIR, loader.resourcePath));
+    require('../../lib/weex-styler').parse(input, function (err, obj) {
+        if (err) {
+            loader.emitError(err);
+            return;
+        }
+        if (obj && obj.jsonStyle) {
+            if (obj.log) {
+                var msgs = [];
+                obj.log.map((log) => {
+                    if (log.reason.indexOf('NOTE:') !== 0) {
+                        // 仅显示警告，错误信息
+                        if (log.selectors) {
+                            msgs.push(`${log.selectors}: ${log.reason} at ${resourcePath}:${log.line}`);
+                        }
+                        else {
+                            msgs.push(`${log.reason} at ${resourcePath}:${log.line}`);
+                        }
+                    }
+                });
+                if (msgs.length) {
+                    if (isFirst) {
+                        msgs.unshift('nvue中不支持如下css。如全局或公共样式受影响，建议将告警样式写在ifndef APP-PLUS-NVUE的条件编译中，详情如下：');
+                        isFirst = false;
+                    }
+                    msgs.forEach((msg) => console.warn(msg));
+                }
+            }
+            try {
+                output = JSON.stringify(obj.jsonStyle, convertLength, 2).replace(/"([-+]?[0-9]*\.?[0-9]+)CSS_UNIT_([A-Z]+)"/g, '$1 * CSS_UNIT.$2');
+            }
+            catch (e) { }
+        }
+    });
+    return output;
+}
+exports.genStyle = genStyle;

packages/uni-cli-nvue/dist/webpack/config/module/rules/cssLoader/index.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCssLoaders = void 0;
+const oneOf_1 = require("./oneOf");
+function createCssLoaders() {
+    return [
+        {
+            test: /\.css$/,
+            oneOf: oneOf_1.createOneOf(),
+        },
+        {
+            test: /\.scss$/,
+            oneOf: oneOf_1.createOneOf(scssLoader),
+        },
+        {
+            test: /\.sass$/,
+            oneOf: oneOf_1.createOneOf(sassLoader),
+        },
+        {
+            test: /\.less$/,
+            oneOf: oneOf_1.createOneOf(lessLoader),
+        },
+        {
+            test: /\.styl(us)?$/,
+            oneOf: oneOf_1.createOneOf(stylusLoader),
+        },
+    ];
+}
+exports.createCssLoaders = createCssLoaders;
+const scssLoader = {
+    loader: 'sass-loader',
+    options: {
+        sourceMap: false,
+        additionalData: '@import "@/uni.scss";',
+        sassOptions: {
+            outputStyle: 'expanded',
+        },
+    },
+};
+const sassLoader = {
+    loader: 'sass-loader',
+    options: {
+        sourceMap: false,
+        additionalData: '@import "@/uni.sass"',
+        sassOptions: {
+            outputStyle: 'expanded',
+            indentedSyntax: true,
+        },
+    },
+};
+const lessLoader = {
+    loader: 'less-loader',
+    options: {
+        sourceMap: false,
+    },
+};
+const stylusLoader = {
+    loader: 'stylus-loader',
+    options: {
+        sourceMap: false,
+        preferPathResolver: 'webpack',
+    },
+};

packages/uni-cli-nvue/dist/webpack/config/module/rules/cssLoader/oneOf.js

+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createOneOf = void 0;
+const path_1 = __importDefault(require("path"));
+const loader_1 = require("../../../../loader");
+const styleLoader = { loader: loader_1.resolveLoader('style') };
+const preprocessLoader = { loader: loader_1.resolveLoader('preprocess') };
+const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+        sourceMap: false,
+        parser: require('postcss-comment'),
+        plugins: [
+            require('postcss-import')({
+                resolve(id) {
+                    if (id.startsWith('~@/')) {
+                        return path_1.default.resolve(process.env.UNI_INPUT_DIR, id.substr(3));
+                    }
+                    else if (id.startsWith('@/')) {
+                        return path_1.default.resolve(process.env.UNI_INPUT_DIR, id.substr(2));
+                    }
+                    else if (id.startsWith('/') && !id.startsWith('//')) {
+                        return path_1.default.resolve(process.env.UNI_INPUT_DIR, id.substr(1));
+                    }
+                    return id;
+                },
+            }),
+        ],
+    },
+};
+function createOneOf(preLoader) {
+    const use = [styleLoader, preprocessLoader];
+    use.push(postcssLoader);
+    if (preLoader) {
+        use.push(preLoader);
+    }
+    return [
+        {
+            resourceQuery: /\?vue/,
+            use,
+        },
+        {
+            use,
+        },
+    ];
+}
+exports.createOneOf = createOneOf;

packages/uni-cli-nvue/dist/webpack/config/module/rules/index.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createRules = void 0;
 const babelLoader_1 = require("./babelLoader");
+const cssLoader_1 = require("./cssLoader");
 const vueLoader_1 = require("./vueLoader");
 function createRules() {
-    return [vueLoader_1.createVueLoader(), babelLoader_1.createBabelLoader()];
+    return [vueLoader_1.createVueLoader(), babelLoader_1.createBabelLoader(), ...cssLoader_1.createCssLoaders()];
 }
 exports.createRules = createRules;

packages/uni-cli-nvue/dist/webpack/loader/index.js

+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveLoader = void 0;
+const path_1 = __importDefault(require("path"));
+function resolveLoader(loader) {
+    return path_1.default.resolve(__dirname, loader);
+}
+exports.resolveLoader = resolveLoader;

packages/uni-cli-nvue/dist/webpack/loader/preprocess.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const uni_cli_shared_1 = require("@dcloudio/uni-cli-shared");
+const preprocess_1 = require("../../utils/preprocess");
+const utils = require('loader-utils');
+function preprocessLoader(content, map) {
+    if (content.indexOf('#ifdef') === -1) {
+        return this.callback(null, content, map);
+    }
+    const types = utils.getOptions(this)
+        .type || ['js'];
+    const resourcePath = this.resourcePath;
+    types.forEach((type) => {
+        try {
+            content = preContent(type, content);
+        }
+        catch (e) {
+            console.error(preprocess_1.normalizePreprocessErrMsg(type, resourcePath));
+        }
+    });
+    this.callback(null, content, map);
+}
+function preContent(type, content) {
+    switch (type) {
+        case 'js':
+            return uni_cli_shared_1.preJs(content);
+        case 'html':
+            return uni_cli_shared_1.preHtml(content);
+        case 'css':
+            return uni_cli_shared_1.preCss(content);
+        case 'json':
+            return uni_cli_shared_1.preJson(content);
+    }
+    return content;
+}
+exports.default = preprocessLoader;

packages/uni-cli-nvue/dist/webpack/loader/style.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("../../utils");
+function styleLoader(content, map) {
+    this.callback(null, 'module.exports = ' + utils_1.genStyle(content, this), map);
+}
+exports.default = styleLoader;

packages/uni-cli-nvue/lib/@vue/component-compiler-utils/dist/parseCustomBlocks.js

-const {
-  getPlatformFilterTag,
-  normalizeNodeModules,
-  jsPreprocessOptions
-} = require('@dcloudio/uni-cli-shared/lib/platform')
-
-const preprocessor = require('@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/preprocess')
-
-const FILTER_TAG = getPlatformFilterTag()
-
-function preprocessBlock(block) {
-  if (block.content) {
-    block.content = preprocessor.preprocess(block.content, jsPreprocessOptions.context, {
-      type: jsPreprocessOptions.type
-    }).trim()
-  }
-  return block
-}
-
 module.exports = function parseCustomBlocks(descriptor, options) {
-  if (
-    process.env.UNI_PLATFORM &&
-    process.env.UNI_PLATFORM.indexOf('mp-') === 0 &&
-    !descriptor.script
-  ) { // 临时方案：小程序平台，无script节点时，自动补充（激活componentSet，否则没法正常追加入口js，后续优化）
-    descriptor.script = {
-      type: 'script',
-      content: 'export default {}',
-      start: 100,
-      attrs: {},
-      end: 125
-    }
-  }
-
-  if (!descriptor.template || !FILTER_TAG || options.isAppNVue) {
-    // delete customBlocks
-    descriptor.customBlocks.length = 0
-    return descriptor
-  }
-
-  const modules = Object.create(null)
-
-  descriptor.customBlocks = descriptor.customBlocks.filter(block => {
-    if (
-      block.attrs.module &&
-      (
-        block.type === FILTER_TAG ||
-        block.attrs.lang === FILTER_TAG
-      )
-    ) {
-      modules[block.attrs.module] = preprocessBlock(block)
-      return true
-    }
-    if ( // renderjs
-      block.attrs.module &&
-      (
-        block.type === 'renderjs' ||
-        block.attrs.lang === 'renderjs'
-      )
-    ) {
-      block.type = 'renderjs'
-      block.attrs.lang = 'js'
-      descriptor.renderjs = preprocessBlock(block)
-      modules[block.attrs.module] = Object.assign({}, block, {
-        content: ''
-      })
-    }
-  })
-
-  if (Object.keys(modules).length) {
-    const filterModules = JSON.parse(JSON.stringify(modules))
-    Object.keys(filterModules).forEach(name => {
-      const filterModule = filterModules[name]
-      if (filterModule.attrs.src) {
-        filterModule.attrs.src = normalizeNodeModules(filterModule.attrs.src)
-      }
-    })
-    descriptor.template.attrs['filter-modules'] = Buffer.from(JSON.stringify(filterModules)).toString('base64')
-  }
-
+  // delete customBlocks
+  descriptor.customBlocks.length = 0
   return descriptor
-}
+}

packages/uni-cli-nvue/lib/vue-loader/lib/index.d.ts

-// import { Plugin } from 'webpack' // fixed by xxxxxx
-import { VueTemplateCompiler } from '@vue/component-compiler-utils/dist/types'
+// import { Plugin } from 'webpack'
+import { VueTemplateCompiler } from '../../@vue/component-compiler-utils/dist/types'
 import { CompilerOptions } from 'vue-template-compiler'
 
 declare namespace VueLoader {

packages/uni-cli-nvue/lib/vue-loader/lib/index.js

@@ -112,7 +112,7 @@ module.exports = function (source) {
   let templateRequest
   // fixed by xxxxxx (recyclable,auto components)
   templateImport += `, recyclableRender, components`
-  const recyclable = descriptor.template && !!(template.attrs && template.attrs.recyclable)
+  const recyclable = descriptor.template && !!(descriptor.template.attrs && descriptor.template.attrs.recyclable)
   if (descriptor.template) {
     const src = descriptor.template.src || resourcePath
     const idQuery = `&id=${id}`

packages/uni-cli-nvue/src/utils/index.ts

+export * from './path'
+export * from './style'

packages/uni-cli-nvue/src/utils/preprocess.ts

+import path from 'path'
+import { normalizePath } from '@dcloudio/uni-cli-shared'
+const TIPS = `条件编译失败,参考示例(注意 ifdef 与 endif 必须配对使用):`
+const ERRORS = {
+  html: `${TIPS}
+  <!--  #ifdef  %PLATFORM% -->
+  模板代码
+  <!--  #endif -->
+  `,
+  js: `${TIPS}
+  // #ifdef  %PLATFORM%
+  js代码
+  // #endif
+  `,
+  css: `${TIPS}
+  /*  #ifdef  %PLATFORM%  */
+  css代码
+  /*  #endif  */
+  `,
+  json: `${TIPS}
+  // #ifdef  %PLATFORM%
+  json代码
+  // #endif
+  `,
+}
+
+export function normalizePreprocessErrMsg(
+  type: 'js' | 'html' | 'css' | 'json',
+  filepath: string
+) {
+  return `${ERRORS[type]} at ${normalizePath(
+    path.relative(process.env.UNI_INPUT_DIR, filepath)
+  )}:1`
+}

packages/uni-cli-nvue/src/utils/style.ts

+import path from 'path'
+import { normalizePath } from '@dcloudio/uni-cli-shared'
+import { LoaderContext } from 'webpack'
+
+// @todo:
+// font-relative lengths: em, ex, ch, ic
+// viewport-relative lengths: vi, vb
+// https://drafts.csswg.org/css-values/#lengths
+const REGEXP_LENGTH =
+  /^([-+]?[0-9]*\.?[0-9]+)(rem|vw|vh|vmin|vmax|cm|mm|q|in|pt|pc|px)$/
+
+function convertLength(k: string, v: unknown) {
+  if (typeof v !== 'string') {
+    return v
+  }
+  const result = v.match(REGEXP_LENGTH)
+  if (result) {
+    if (result[2] === 'px') {
+      return result[1]
+    }
+    return result[1] + 'CSS_UNIT_' + result[2].toUpperCase()
+  }
+  return v
+}
+
+let isFirst = true
+
+export function genStyle(input: string, loader: LoaderContext<{}>) {
+  let output = '{}'
+  const resourcePath = normalizePath(
+    path.relative(process.env.UNI_INPUT_DIR, loader.resourcePath)
+  )
+  require('../../lib/weex-styler').parse(
+    input,
+    function (err: Error, obj: any) {
+      if (err) {
+        loader.emitError(err)
+        return
+      }
+      if (obj && obj.jsonStyle) {
+        if (obj.log) {
+          var msgs = []
+          obj.log.map((log: any) => {
+            if (log.reason.indexOf('NOTE:') !== 0) {
+              // 仅显示警告，错误信息
+              if (log.selectors) {
+                msgs.push(
+                  `${log.selectors}: ${log.reason} at ${resourcePath}:${log.line}`
+                )
+              } else {
+                msgs.push(`${log.reason} at ${resourcePath}:${log.line}`)
+              }
+            }
+          })
+          if (msgs.length) {
+            if (isFirst) {
+              msgs.unshift(
+                'nvue中不支持如下css。如全局或公共样式受影响，建议将告警样式写在ifndef APP-PLUS-NVUE的条件编译中，详情如下：'
+              )
+              isFirst = false
+            }
+            msgs.forEach((msg) => console.warn(msg))
+          }
+        }
+        try {
+          output = JSON.stringify(obj.jsonStyle, convertLength, 2).replace(
+            /"([-+]?[0-9]*\.?[0-9]+)CSS_UNIT_([A-Z]+)"/g,
+            '$1 * CSS_UNIT.$2'
+          )
+        } catch (e) {}
+      }
+    }
+  )
+  return output
+}

packages/uni-cli-nvue/src/webpack/config/module/rules/cssLoader/index.ts

+import { RuleSetRule } from 'webpack'
+import { createOneOf } from './oneOf'
+
+export function createCssLoaders(): RuleSetRule[] {
+  return [
+    {
+      test: /\.css$/,
+      oneOf: createOneOf(),
+    },
+    {
+      test: /\.scss$/,
+      oneOf: createOneOf(scssLoader),
+    },
+    {
+      test: /\.sass$/,
+      oneOf: createOneOf(sassLoader),
+    },
+    {
+      test: /\.less$/,
+      oneOf: createOneOf(lessLoader),
+    },
+    {
+      test: /\.styl(us)?$/,
+      oneOf: createOneOf(stylusLoader),
+    },
+  ]
+}
+
+const scssLoader = {
+  loader: 'sass-loader',
+  options: {
+    sourceMap: false,
+    additionalData: '@import "@/uni.scss";',
+    sassOptions: {
+      outputStyle: 'expanded',
+    },
+  },
+}
+
+const sassLoader = {
+  loader: 'sass-loader',
+  options: {
+    sourceMap: false,
+    additionalData: '@import "@/uni.sass"',
+    sassOptions: {
+      outputStyle: 'expanded',
+      indentedSyntax: true,
+    },
+  },
+}
+
+const lessLoader = {
+  loader: 'less-loader',
+  options: {
+    sourceMap: false,
+  },
+}
+
+const stylusLoader = {
+  loader: 'stylus-loader',
+  options: {
+    sourceMap: false,
+    preferPathResolver: 'webpack',
+  },
+}

packages/uni-cli-nvue/src/webpack/config/module/rules/cssLoader/oneOf.ts

+import path from 'path'
+
+import { resolveLoader } from '../../../../loader'
+
+const styleLoader = { loader: resolveLoader('style') }
+const preprocessLoader = { loader: resolveLoader('preprocess') }
+const postcssLoader = {
+  loader: 'postcss-loader',
+  options: {
+    sourceMap: false,
+    parser: require('postcss-comment'),
+    plugins: [
+      require('postcss-import')({
+        resolve(id: string) {
+          if (id.startsWith('~@/')) {
+            return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
+          } else if (id.startsWith('@/')) {
+            return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
+          } else if (id.startsWith('/') && !id.startsWith('//')) {
+            return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
+          }
+          return id
+        },
+      }),
+    ],
+  },
+}
+export function createOneOf(preLoader?: {
+  loader: string
+  options?: Record<string, any>
+}) {
+  const use = [styleLoader, preprocessLoader]
+  use.push(postcssLoader)
+  if (preLoader) {
+    use.push(preLoader)
+  }
+  return [
+    {
+      resourceQuery: /\?vue/,
+      use,
+    },
+    {
+      use,
+    },
+  ]
+}

packages/uni-cli-nvue/src/webpack/config/module/rules/index.ts

 import { RuleSetRule } from 'webpack'
 import { createBabelLoader } from './babelLoader'
+import { createCssLoaders } from './cssLoader'
 import { createVueLoader } from './vueLoader'
 export function createRules(): RuleSetRule[] {
-  return [createVueLoader(), createBabelLoader()]
+  return [createVueLoader(), createBabelLoader(), ...createCssLoaders()]
 }

packages/uni-cli-nvue/src/webpack/loader/index.ts

+import path from 'path'
+export function resolveLoader(loader: string) {
+  return path.resolve(__dirname, loader)
+}

packages/uni-cli-nvue/src/webpack/loader/preprocess.ts

+import { LoaderContext } from 'webpack'
+import { preJs, preCss, preHtml, preJson } from '@dcloudio/uni-cli-shared'
+import { normalizePreprocessErrMsg } from '../../utils/preprocess'
+const utils = require('loader-utils')
+function preprocessLoader(this: LoaderContext<{}>, content: string, map: any) {
+  if (content.indexOf('#ifdef') === -1) {
+    return this.callback(null, content, map)
+  }
+  const types: ('js' | 'html' | 'css' | 'json')[] = utils.getOptions(this)
+    .type || ['js']
+  const resourcePath = this.resourcePath
+  types.forEach((type) => {
+    try {
+      content = preContent(type, content)
+    } catch (e) {
+      console.error(normalizePreprocessErrMsg(type, resourcePath))
+    }
+  })
+  this.callback(null, content, map)
+}
+
+function preContent(
+  type: 'js' | 'html' | 'css' | 'json' | string,
+  content: string
+) {
+  switch (type) {
+    case 'js':
+      return preJs(content)
+    case 'html':
+      return preHtml(content)
+    case 'css':
+      return preCss(content)
+    case 'json':
+      return preJson(content)
+  }
+  return content
+}
+export default preprocessLoader

packages/uni-cli-nvue/src/webpack/loader/style.ts

+import { LoaderContext } from 'webpack'
+import { genStyle } from '../../utils'
+
+function styleLoader(this: LoaderContext<{}>, content: string, map: any) {
+  this.callback(null, 'module.exports = ' + genStyle(content, this), map)
+}
+
+export default styleLoader