feat(v3): init mp runtime

build/rollup.config.mp.js

@@ -31,12 +31,20 @@ const PLATFORMS = {
 
 const platform = PLATFORMS[process.env.UNI_PLATFORM]
 
+let input = 'src/core/runtime/index.js'
+const output = {
+  file: `packages/uni-${process.env.UNI_PLATFORM}/dist/index.js`,
+  format: 'es'
+}
+
+if (process.env.UNI_MP) {
+  input = 'src/core/runtime/mp/index.js'
+  output.file = `packages/uni-${process.env.UNI_PLATFORM}/dist/mp.js`
+}
+
 module.exports = {
-  input: 'src/core/runtime/index.js',
-  output: {
-    file: `packages/uni-${process.env.UNI_PLATFORM}/dist/index.js`,
-    format: 'es'
-  },
+  input,
+  output,
   plugins: [
     alias({
       'uni-shared': path.resolve(__dirname, '../src/shared/util.js'),

package.json

@@ -20,7 +20,8 @@
     "build:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin rollup -c build/rollup.config.mp.js",
     "build:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu rollup -c build/rollup.config.mp.js",
     "build:mp-alipay": "cross-env UNI_PLATFORM=mp-alipay rollup -c build/rollup.config.mp.js",
-    "build:mp-toutiao": "cross-env UNI_PLATFORM=mp-toutiao rollup -c build/rollup.config.mp.js",
+    "build:mp-toutiao": "cross-env UNI_PLATFORM=mp-toutiao rollup -c build/rollup.config.mp.js",
+    "build:mp-weixin:mp": "npm run lint && cross-env UNI_PLATFORM=mp-weixin UNI_MP=true rollup -c build/rollup.config.mp.js",
     "build:runtime": "npm run lint && npm run build:mp-weixin && npm run build:mp-qq && npm run build:mp-alipay && npm run build:mp-baidu && npm run build:mp-toutiao && npm run build:app-plus",
     "build:stat": "npm run lint && rollup -c build/rollup.config.stat.js",
     "test:cli": "cross-env NODE_ENV=test jest",

packages/uni-mp-weixin/dist/mp.js

+function parseData (data, vueComponentOptions) {
+  if (!data) {
+    return
+  }
+  const dataJson = JSON.stringify(data);
+  vueComponentOptions.data = function () {
+    return JSON.parse(dataJson)
+  };
+}
+
+const _toString = Object.prototype.toString;
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+function isFn (fn) {
+  return typeof fn === 'function'
+}
+
+function isPlainObject (obj) {
+  return _toString.call(obj) === '[object Object]'
+}
+
+function hasOwn (obj, key) {
+  return hasOwnProperty.call(obj, key)
+}
+
+function parseProperty (name, property, watch) {
+  if (!isPlainObject(property)) {
+    property = {
+      type: property
+    };
+  }
+  const type = [property.type];
+  if (Array.isArray(property.optionalTypes)) {
+    type.push(...property.optionalTypes);
+  }
+  const prop = Object.create(null);
+  prop.type = type;
+  if (hasOwn(property, 'value')) {
+    prop['default'] = property.value;
+  }
+  if (hasOwn(property, 'observer')) {
+    watch[name] = property.observer;
+  }
+  return prop
+}
+
+function parseProperties (properties, vueComponentOptions) {
+  if (!properties) {
+    return
+  }
+  const props = Object.create(null);
+  const {
+    watch
+  } = vueComponentOptions;
+  Object.keys(properties).forEach(name => {
+    props[name] = parseProperty(name, properties[name], watch);
+  });
+  vueComponentOptions.props = props;
+}
+
+function parseOptions (options, vueComponentOptions) {
+  if (!options) {
+    return
+  }
+  vueComponentOptions.mpOptions.options = options;
+}
+
+function parseMethods (methods, vueComponentOptions) {
+  if (!methods) {
+    return
+  }
+  vueComponentOptions.methods = methods;
+}
+
+const LIFECYCLE = {
+  'created': 'created',
+  'attached': 'created',
+  'ready': 'mounted',
+  'moved': 'moved',
+  'detached': 'destroyed'
+};
+const LIFECYCLE_KEYS = Object.keys(LIFECYCLE);
+
+function parseLifecycle (mpComponentOptions, vueComponentOptions) {
+  Object.keys(LIFECYCLE_KEYS).forEach(name => {
+    if (hasOwn(mpComponentOptions, name)) {
+      vueComponentOptions[LIFECYCLE[name]] = mpComponentOptions[name];
+    }
+  });
+}
+
+const mpBehaviors = {
+  'wx://form-field': {},
+  'wx://component-export': {}
+};
+
+function callDefinitionFilter (mpComponentOptions) {
+  const {
+    behaviors,
+    definitionFilter
+  } = mpComponentOptions;
+
+  const behaviorDefinitionFilters = [];
+
+  if (Array.isArray(behaviors)) {
+    behaviors.forEach(behavior => {
+      behavior = typeof behavior === 'string' ? mpBehaviors[behavior] : behavior;
+      if (behavior.definitionFilter) {
+        behaviorDefinitionFilters.push(behavior.definitionFilter);
+        behavior.definitionFilter.call(null, mpComponentOptions, []);
+      }
+    });
+  }
+
+  if (isFn(definitionFilter)) {
+    return function (defFields) {
+      definitionFilter(defFields, behaviorDefinitionFilters);
+    }
+  }
+}
+
+function parseDefinitionFilter (mpComponentOptions, vueComponentOptions) {
+  callDefinitionFilter(mpComponentOptions);
+}
+
+function parseBehavior (behavior) {
+  const {
+    data,
+    methods,
+    behaviors,
+    properties
+  } = behavior;
+
+  const vueComponentOptions = {
+    watch: {},
+    mpOptions: {
+      mpObservers: []
+    }
+  };
+
+  parseData(data, vueComponentOptions);
+  parseMethods(methods, vueComponentOptions);
+  parseBehaviors(behaviors, vueComponentOptions);
+  parseProperties(properties, vueComponentOptions);
+
+  parseLifecycle(behavior, vueComponentOptions);
+  parseDefinitionFilter(behavior);
+
+  return vueComponentOptions
+}
+
+function parseBehaviors (behaviors, vueComponentOptions) {
+  if (!behaviors) {
+    return
+  }
+  behaviors.forEach(behavior => {
+    if (typeof behavior === 'string') {
+      (vueComponentOptions.behaviors || (vueComponentOptions.behaviors = [])).push(behavior);
+    } else {
+      vueComponentOptions.mixins.push(parseBehavior(behavior));
+    }
+  });
+}
+
+function parseSinglePath (path) {
+  return path.split('.')
+}
+
+function parseMultiPaths (paths) {
+  return paths.split(',').map(path => parseSinglePath(path))
+}
+
+function parseObservers (observers, vueComponentOptions) {
+  if (!observers) {
+    return
+  }
+
+  const {
+    mpObservers
+  } = vueComponentOptions.mpOptions;
+
+  Object.keys(observers).forEach(path => {
+    mpObservers.push({
+      paths: parseMultiPaths(path),
+      observer: observers[path]
+    });
+  });
+}
+
+function parseRelations (relations, vueComponentOptions) {
+  if (!relations) {
+    return
+  }
+  vueComponentOptions.mpOptions.relations = relations;
+}
+
+function parseExternalClasses (externalClasses, vueComponentOptions) {
+  if (!externalClasses) {
+    return
+  }
+  vueComponentOptions.mpOptions.externalClasses = externalClasses;
+}
+
+function parseLifetimes (lifetimes, vueComponentOptions) {
+  if (!lifetimes) {
+    return
+  }
+  parseLifecycle(lifetimes, vueComponentOptions);
+}
+
+function parseComponent (mpComponentOptions) {
+  const {
+    data,
+    options,
+    methods,
+    behaviors,
+    lifetimes,
+    observers,
+    relations,
+    properties,
+    pageLifetimes,
+    externalClasses
+  } = mpComponentOptions;
+
+  const vueComponentOptions = {
+    mixins: [],
+    watch: {},
+    mpOptions: {
+      mpObservers: []
+    }
+  };
+
+  parseData(data, vueComponentOptions);
+  parseOptions(options, vueComponentOptions);
+  parseMethods(methods, vueComponentOptions);
+  parseBehaviors(behaviors, vueComponentOptions);
+  parseLifetimes(lifetimes, vueComponentOptions);
+  parseObservers(observers, vueComponentOptions);
+  parseRelations(relations, vueComponentOptions);
+  parseProperties(properties, vueComponentOptions);
+  parseExternalClasses(externalClasses, vueComponentOptions);
+
+  parseLifecycle(mpComponentOptions, vueComponentOptions);
+  parseDefinitionFilter(mpComponentOptions);
+
+  return vueComponentOptions
+}
+
+var polyfill = {
+  beforeCreate () {
+    // TODO 先简单处理
+    this.data = this;
+
+    this.setData = (data, callback) => {
+      // TODO data path: array[0].text,object.text
+      Object.keys(data).forEach(name => {
+        this[name] = data[name];
+      });
+    };
+
+    const oldEmit = this.$emit;
+    this.triggerEvent = (eventName, detail, options) => {
+      oldEmit.call(this, eventName, {
+        detail
+      });
+    };
+  }
+};
+
+function Component (options) {
+  const componentOptions = parseComponent(options);
+  componentOptions.mixins.unshift(polyfill);
+  global['__wxComponents'][global['__wxRoute']] = componentOptions;
+}
+
+function Behavior (options) {
+  return options
+}
+
+export { Behavior, Component };

packages/vue-cli-plugin-uni/lib/app-plus/index.js

@@ -12,7 +12,9 @@ const {
 
 function getProvides () {
   return {
-    '__f__': [path.resolve(__dirname, '../format-log.js'), 'default']
+    '__f__': [path.resolve(__dirname, '../format-log.js'), 'default'],
+    'Behavior': ['@dcloudio/uni-mp-weixin/dist/mp.js', 'Behavior'],
+    'Component': ['@dcloudio/uni-mp-weixin/dist/mp.js', 'Component']
   }
 }
 

packages/vue-cli-plugin-uni/packages/webpack-uni-app-loader/view/script.js

@@ -19,7 +19,7 @@ function genComponentCode(components) {
     source
   }) => {
     importCode.push(`import ${value} from '${source}'`)
-    componentsCode.push(`${name}: ${value}`)
+    componentsCode.push(`'${name}': ${value}`)
   })
   return [importCode.join('\n'), componentsCode.join(',\n')]
 }

src/core/runtime/mp/index.js

+import {
+  parseComponent
+} from './parser/component-parser'
+
+import polyfill from './polyfill'
+
+export function Component (options) {
+  const componentOptions = parseComponent(options)
+  componentOptions.mixins.unshift(polyfill)
+  global['__wxComponents'][global['__wxRoute']] = componentOptions
+}
+
+export function Behavior (options) {
+  return options
+}

src/core/runtime/mp/parser/behaviors-parser.js

+import {
+  parseData
+} from './data-parser'
+
+import {
+  parseProperties
+} from './properties-parser'
+
+import {
+  parseMethods
+} from './methods-parser'
+
+import {
+  parseLifecycle
+} from './lifecycle-parser'
+
+import {
+  parseDefinitionFilter
+} from './definition-filter-parser'
+
+function parseBehavior (behavior) {
+  const {
+    data,
+    methods,
+    behaviors,
+    properties
+  } = behavior
+
+  const vueComponentOptions = {
+    watch: {},
+    mpOptions: {
+      mpObservers: []
+    }
+  }
+
+  parseData(data, vueComponentOptions)
+  parseMethods(methods, vueComponentOptions)
+  parseBehaviors(behaviors, vueComponentOptions)
+  parseProperties(properties, vueComponentOptions)
+
+  parseLifecycle(behavior, vueComponentOptions)
+  parseDefinitionFilter(behavior, vueComponentOptions)
+
+  return vueComponentOptions
+}
+
+export function parseBehaviors (behaviors, vueComponentOptions) {
+  if (!behaviors) {
+    return
+  }
+  behaviors.forEach(behavior => {
+    if (typeof behavior === 'string') {
+      (vueComponentOptions.behaviors || (vueComponentOptions.behaviors = [])).push(behavior)
+    } else {
+      vueComponentOptions.mixins.push(parseBehavior(behavior))
+    }
+  })
+}

src/core/runtime/mp/parser/component-parser.js

+import {
+  parseData
+} from './data-parser'
+
+import {
+  parseProperties
+} from './properties-parser'
+
+import {
+  parseOptions
+} from './options-parser'
+
+import {
+  parseMethods
+} from './methods-parser'
+
+import {
+  parseBehaviors
+} from './behaviors-parser'
+
+import {
+  parseObservers
+} from './observers-parser'
+
+import {
+  parseRelations
+} from './relations-parser'
+
+import {
+  parseExternalClasses
+} from './external-classes-parser'
+
+import {
+  parseLifetimes
+} from './lifetimes-parser'
+
+import {
+  parseLifecycle
+} from './lifecycle-parser'
+
+import {
+  parseDefinitionFilter
+} from './definition-filter-parser'
+
+import {
+  parsePageLifetimes
+} from './page-lifetimes-parser'
+
+export function parseComponent (mpComponentOptions) {
+  const {
+    data,
+    options,
+    methods,
+    behaviors,
+    lifetimes,
+    observers,
+    relations,
+    properties,
+    pageLifetimes,
+    externalClasses
+  } = mpComponentOptions
+
+  const vueComponentOptions = {
+    mixins: [],
+    watch: {},
+    mpOptions: {
+      mpObservers: []
+    }
+  }
+
+  parseData(data, vueComponentOptions)
+  parseOptions(options, vueComponentOptions)
+  parseMethods(methods, vueComponentOptions)
+  parseBehaviors(behaviors, vueComponentOptions)
+  parseLifetimes(lifetimes, vueComponentOptions)
+  parseObservers(observers, vueComponentOptions)
+  parseRelations(relations, vueComponentOptions)
+  parseProperties(properties, vueComponentOptions)
+  parsePageLifetimes(pageLifetimes, vueComponentOptions)
+  parseExternalClasses(externalClasses, vueComponentOptions)
+
+  parseLifecycle(mpComponentOptions, vueComponentOptions)
+  parseDefinitionFilter(mpComponentOptions, vueComponentOptions)
+
+  return vueComponentOptions
+}

src/core/runtime/wrapper/create-vue-component/parser/external-classes-parser.js → src/core/runtime/mp/parser/external-classes-parser.js

@@ -2,5 +2,5 @@ export function parseExternalClasses (externalClasses, vueComponentOptions) {
   if (!externalClasses) {
     return
   }
-  vueComponentOptions.mpExternalClasses = externalClasses
+  vueComponentOptions.mpOptions.externalClasses = externalClasses
 }

src/core/runtime/wrapper/create-vue-component/parser/observers-parser.js → src/core/runtime/mp/parser/observers-parser.js

@@ -13,7 +13,7 @@ export function parseObservers (observers, vueComponentOptions) {
 
   const {
     mpObservers
-  } = vueComponentOptions
+  } = vueComponentOptions.mpOptions
 
   Object.keys(observers).forEach(path => {
     mpObservers.push({

src/core/runtime/wrapper/create-vue-component/parser/options-parser.js → src/core/runtime/mp/parser/options-parser.js

@@ -2,5 +2,5 @@ export function parseOptions (options, vueComponentOptions) {
   if (!options) {
     return
   }
-  vueComponentOptions.mpOptions = options
+  vueComponentOptions.mpOptions.options = options
 }

src/core/runtime/wrapper/create-vue-component/parser/properties-parser.js → src/core/runtime/mp/parser/properties-parser.js

 import {
-  hasOwn
+  hasOwn,
+  isPlainObject
 } from 'uni-shared'
 
 function parseProperty (name, property, watch) {
+  if (!isPlainObject(property)) {
+    property = {
+      type: property
+    }
+  }
   const type = [property.type]
   if (Array.isArray(property.optionalTypes)) {
     type.push(...property.optionalTypes)
@@ -10,7 +16,7 @@ function parseProperty (name, property, watch) {
   const prop = Object.create(null)
   prop.type = type
   if (hasOwn(property, 'value')) {
-    prop['default'] = prop.value
+    prop['default'] = property.value
   }
   if (hasOwn(property, 'observer')) {
     watch[name] = property.observer

src/core/runtime/wrapper/create-vue-component/parser/relations-parser.js → src/core/runtime/mp/parser/relations-parser.js

@@ -2,5 +2,5 @@ export function parseRelations (relations, vueComponentOptions) {
   if (!relations) {
     return
   }
-  vueComponentOptions.mpRelations = relations
+  vueComponentOptions.mpOptions.relations = relations
 }

src/core/runtime/mp/polyfill.js

+export default {
+  beforeCreate () {
+    // TODO 先简单处理
+    this.data = this
+
+    this.setData = (data, callback) => {
+      // TODO data path: array[0].text,object.text
+      Object.keys(data).forEach(name => {
+        this[name] = data[name]
+      })
+    }
+
+    const oldEmit = this.$emit
+    this.triggerEvent = (eventName, detail, options) => {
+      oldEmit.call(this, eventName, {
+        detail
+      })
+    }
+  }
+}

src/core/runtime/wrapper/create-vue-component/index.js

-import {
-  parseComponentOptions
-} from './parser'
-
-export default function createVueComponent (mpComponentOptions) {
-  return parseComponentOptions(mpComponentOptions)
-}

src/core/runtime/wrapper/create-vue-component/parser/behaviors-parser.js

-import {
-  parseComponentOptions
-} from './index'
-
-const mixins = {
-  'wx://form-field': {
-
-  },
-  'wx://component-export': {
-
-  }
-}
-
-function parseBehavior (behavior) {
-  if (typeof behavior === 'string') {
-    return mixins[behavior]
-  }
-  return parseComponentOptions(behavior)
-}
-
-export function parseBehaviors (behaviors, vueComponentOptions) {
-  if (!behaviors) {
-    vueComponentOptions.mixins = behaviors.forEach(behavior => {
-      return parseBehavior(behavior)
-    })
-  }
-}

src/core/runtime/wrapper/create-vue-component/parser/index.js

-import {
-  parseProperties
-} from './parser'
-
-export function parseComponentOptions (mpComponentOptions) {
-  const vueComponentOptions = {
-    watch: {},
-    mpObservers: []
-  }
-
-  parseProperties(mpComponentOptions.properties, vueComponentOptions)
-
-  return vueComponentOptions
-}