feat: 🎸 demo simulator

.gitignore

@@ -6,9 +6,9 @@ dist
 *.txt
 test-website
 .profile
-yarn.lock
 packages/parser/lib/example.ts
 .vscode/launch.json
 .DS_Store
 packages/demo
 demo/docs/.vitepress/cache
+.cache

demo/app.mpx

@@ -0,0 +1,33 @@
+<script lang="ts" src="./app.ts"></script>
+
+<style lang="stylus">
+.page
+  height 100%
+
+::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+}
+</style>
+
+<script type="application/json">
+  {
+    "pages": [
+      "./pages/index",
+      "./pages/button/index",
+      "./pages/button-group/index"
+    ]
+  }
+</script>
+
+<!--也可以通过以下形式用js输出json，便于书写注释和使用条件编译-->
+
+<!--<script name="json">-->
+<!--  // 可以写注释，通过defs注入的常量做一些判断之类的操作-->
+<!--  module.exports = {-->
+<!--    pages: [-->
+<!--      './pages/index'-->
+<!--    ]-->
+<!--  }-->
+<!--</script>-->
+

demo/app.ts

@@ -0,0 +1,23 @@
+import mpx, { createApp } from '@mpxjs/core'
+import apiProxy from '@mpxjs/api-proxy'
+
+mpx.use(apiProxy, { usePromise: true })
+
+// app.js
+createApp({})
+
+const isIframe = __mpx_mode__ === 'web' && window.parent !== window
+
+if (isIframe) {
+  let prevPath = ''
+  const handleMessage = (e) => {
+    const { to } = (typeof e.data === 'object' ? e.data : {}) as any
+    if (to !== undefined && to !== prevPath) {
+      mpx.redirectTo({
+        url: `/pages/${to && to !== 'intro' ? `${to}/` : ''}index`
+      })
+      prevPath = to
+    }
+  }
+  window.addEventListener('message', handleMessage)
+}

demo/babel.config.json

@@ -0,0 +1,34 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "shippedProposals": true
+      }
+    ]
+  ],
+  "plugins": [
+    [
+      "@babel/transform-runtime",
+      {
+        "corejs": 3,
+        "version": "^7.10.4"
+      }
+    ],
+    "@mpxjs/babel-plugin-inject-page-events"
+  ],
+  "sourceType": "unambiguous",
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/env",
+          {
+            "shippedProposals": true
+          }
+        ]
+      ]
+    }
+  }
+}

demo/common/config.ts

@@ -0,0 +1,13 @@
+export default {
+  'entryMap': {
+    introduce: [
+      {
+        name: '基础',
+        components: [
+          'button',
+          'button-group'
+        ]
+      }
+    ]
+  }
+}

demo/components/base-container/index.mpx

@@ -0,0 +1,52 @@
+<template>
+  <view class="base-container" wx:style="{{ style }}">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+const isIframe = __mpx_mode__ === 'web' && window.parent !== window
+
+createComponent({
+  options: {
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  },
+  data: {
+    style: !isIframe ? {
+      height: 'auto',
+      minHeight: '100%',
+      overflow: 'unset'
+    } : {}
+  }
+})
+</script>
+
+<style lang="stylus">
+view.base-container,
+div.base-container
+  background-color #f7f8fa
+.base-container
+  width 100%
+  height 100%
+  padding 20px
+  box-sizing border-box
+  overflow auto
+  -webkit-overflow-scrolling touch
+  &::after
+    display block
+    content ' '
+    width 100%
+    height 1px
+    background-color transparent
+</style>
+
+<script type="application/json">
+  {
+    "styleIsolation": "shared",
+    "component": true,
+    "usingComponents": {}
+  }
+</script>

demo/components/desc/index.mpx

@@ -0,0 +1,31 @@
+<template>
+  <view class="desc">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  options: {
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+})
+</script>
+
+<style lang="stylus">
+.desc
+  font-size 12px
+  color #4B4B4D
+  line-height 18px
+  margin-bottom 15px
+</style>
+
+<script type="application/json">
+  {
+    "styleIsolation": "shared",
+    "component": true
+  }
+</script>

demo/docs/.vitepress/config.mjs

@@ -28,8 +28,8 @@ function init() {
     themeConfig: {
       iframeConfig: {
         path: {
-          dev: 'http://localhost:8080/#/pages/cube/index?routeCount=1',
-          prod: ''
+          dev: 'http://localhost:8090',
+          prod: '8090'
         }
       },
       aside:false,

demo/package.json

@@ -1,17 +1,56 @@
 {
   "name": "demo",
   "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
   "scripts": {
     "test": "node index",
     "docs": "vitepress dev docs",
-    "gen-doc": "vuese-website"
+    "gen-doc": "vuese-website",
+    "build:ali": "mpx-cli-service build --targets=ali",
+    "build:dd": "mpx-cli-service build --targets=dd",
+    "build:mp": "mpx-cli-service build",
+    "build:mp:dev": "mpx-cli-service build --mode=development",
+    "build:web": "mpx-cli-service build --targets=web",
+    "inspect:mp": "mpx-cli-service inspect > output.js",
+    "inspect:web": "mpx-cli-service inspect --targets=web > output.js",
+    "watch:mp": "mpx-cli-service serve",
+    "watch:ali": "mpx-cli-service serve --targets=ali",
+    "watch:web": "mpx-cli-service serve --targets=web"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "browserslist": "ios >= 8, chrome >= 47",
   "dependencies": {
+    "@babel/core": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.10.4",
+    "@babel/plugin-transform-typescript": "^7.20.0",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/runtime-corejs3": "^7.10.4",
+    "@mpxjs/api-proxy": "2.9.21",
+    "@mpxjs/babel-plugin-inject-page-events": "^2.9.0",
+    "@mpxjs/core": "2.9.21",
+    "@mpxjs/mpx-cli-service": "^2.1.5",
+    "@mpxjs/mpx-cube-ui": "^1.0.3",
+    "@mpxjs/store": "^2.9.0",
+    "@mpxjs/vue-cli-plugin-mpx": "^2.1.5",
+    "@mpxjs/vue-cli-plugin-mpx-theme": "2.0.0-beta.2",
+    "@mpxjs/vue-cli-plugin-mpx-typescript": "^2.1.5",
     "@mpxjs/vuese-website": "file:../packages/website",
-    "vitepress": "^1.2.3"
-  },
-  "author": "",
-  "license": "ISC"
+    "@mpxjs/webpack-plugin": "2.9.17",
+    "@vue/cli-service": "~5.0.8",
+    "postcss-css-variables": "^0.19.0",
+    "stylus": "^0.55.0",
+    "stylus-loader": "^6.1.0",
+    "typescript": "^4.9.5",
+    "vitepress": "^1.2.3",
+    "vue": "^2.6.14",
+    "vue-demi": "^0.13.11",
+    "vue-i18n": "^8.27.2",
+    "vue-i18n-bridge": "^9.2.2",
+    "vue-router": "^3.6.5",
+    "webpack": "^5.48.0"
+  }
 }

demo/pages/basic-button/index.mpx → demo/pages/button/index.mpx

@@ -10,45 +10,16 @@
         <btn-bolder class="btn-in-two" />
         <btn-outline class="btn-in-two ml10" />
       </view>
-      <view class="two-btn-item">
-        <block wx:if="{{ isPassenger }}">
-          <btn-light class="btn-in-two" />
-        </block>
-      </view>
       <view-desc>内联按钮</view-desc>
       <view class="btn-item">
         <btn-inline-outline class="inline-btn-item" />
         <btn-inline-primary />
       </view>
-      <block wx:if="{{ isDriver }}">
-        <view-desc>inline with icon 按钮</view-desc>
-        <view class="btn-item">
-          <btn-inline-icon />
-        </view>
-        <view-desc>With Icon 按钮</view-desc>
-        <view class="btn-item">
-          <btn-icon />
-        </view>
-      </block>
       <view-desc>激活与置灰态</view-desc>
       <view class="btn-item">
         <btn-secondary-active class="btn-in-two" />
         <btn-disabled class="btn-in-two ml10" />
       </view>
-      <block wx:if="{{ isPassenger }}">
-        <view-desc>Loading 按钮</view-desc>
-        <view class="btn-item">
-          <btn-loading />
-        </view>
-        <view-desc>With Icon 按钮</view-desc>
-        <view class="btn-item">
-          <btn-icon />
-        </view>
-        <view-desc>With Tip 按钮</view-desc>
-        <view class="btn-item">
-          <btn-with-tip />
-        </view>
-      </block>
       <view-desc>open-type: share</view-desc>
       <view class="btn-item">
         <btn-share />
@@ -87,18 +58,8 @@
 
 <script>
 import { createPage } from '@mpxjs/core'
-import { useTheme } from '../../common/theme'
-
-createPage({
-  setup() {
-    const { isDriver, isPassenger } = useTheme()
 
-    return {
-      isDriver,
-      isPassenger
-    }
-  }
-})
+createPage({})
 </script>
 
 <style lang="stylus">