refactor: 解决子包循环依赖问题 (opentiny#313)

* refactor: move common/js to controller/js

* refactor: replace common/js

* refactor: replace ../js

* refactor: update package.json

* refactor: resolve canvas rely on common

* refactor: remove controller deps in http

* refactor: add canvas renderer state

* refactor: remove useless file ext

* refactor: modify controller deps path

* refactor: fix eslint

* refactor: resolve http env

packages/canvas/package.json

@@ -28,7 +28,6 @@
   "dependencies": {
     "@babel/core": "7.18.13",
     "@opentiny/tiny-engine-builtin-component": "workspace:*",
-    "@opentiny/tiny-engine-common": "workspace:*",
     "@opentiny/tiny-engine-controller": "workspace:*",
     "@opentiny/tiny-engine-i18n-host": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",

packages/canvas/src/components/container/CanvasContainer.vue

@@ -29,7 +29,7 @@
 
 <script>
 import { onMounted, ref, computed, onUnmounted } from 'vue'
-import { iframeMonitoring } from '@opentiny/tiny-engine-common/js/monitor'
+import { iframeMonitoring } from '@opentiny/tiny-engine-controller/js/monitor'
 import { useTranslate, useCanvas, useResource } from '@opentiny/tiny-engine-controller'
 import CanvasAction from './CanvasAction.vue'
 import CanvasResize from './CanvasResize.vue'
@@ -119,6 +119,7 @@ export default {
         iframeMonitoring()
 
         initCanvas({ emit, renderer: detail, iframe: iframe.value, controller: props.controller })
+        useCanvas().renderer = detail
 
         const doc = iframe.value.contentDocument
         const win = iframe.value.contentWindow

packages/canvas/src/components/container/CanvasMenu.vue

@@ -27,15 +27,14 @@
         </ul>
       </li>
     </ul>
-    <save-new-block :boxVisibility="boxVisibility" fromCanvas @close="close"></save-new-block>
+    <SaveNewBlock :boxVisibility="boxVisibility" fromCanvas @close="close"></SaveNewBlock>
   </div>
 </template>
 
 <script lang="jsx">
 import { ref, reactive, nextTick } from 'vue'
 import { getConfigure, getController, getCurrent, copyNode, removeNodeById } from './container'
 import { useLayout, useModal, useCanvas } from '@opentiny/tiny-engine-controller'
-import { SaveNewBlock } from '@opentiny/tiny-engine-common'
 import { iconRight } from '@opentiny/vue-icon'
 
 const menuState = reactive({
@@ -74,7 +73,6 @@ export const openMenu = (offset, event) => {
 
 export default {
   components: {
-    SaveNewBlock,
     IconRight: iconRight()
   },
   setup(props, { emit }) {

packages/canvas/src/components/container/container.js

@@ -28,7 +28,7 @@ export const POSITION = Object.freeze({
   IN: 'in',
   FORBID: 'forbid'
 })
-import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
+import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
 
 const initialDragState = {
   keydown: false,

packages/canvas/src/components/container/shortCutPopover.vue

@@ -7,9 +7,9 @@
         <icon-close class="icon-close" @click="closePanel"></icon-close>
       </span>
     </div>
-    <config-group :group="propertiesList" :index="0">
+    <ConfigGroup :group="propertiesList" :index="0">
       <template #item="{ data, propIndex }">
-        <config-item
+        <ConfigItem
           :key="propIndex"
           :property="data"
           :data-prop-index="propIndex"
@@ -22,22 +22,19 @@
           <template v-if="!data.noBinding" #suffix>
             <slot name="suffix" :data="data"></slot>
           </template>
-        </config-item>
+        </ConfigItem>
       </template>
-    </config-group>
+    </ConfigGroup>
   </div>
 </template>
 
 <script>
 import { computed, ref } from 'vue'
 import { useResource, useProperties, useCanvas, useProperty } from '@opentiny/tiny-engine-controller'
-import { ConfigGroup, ConfigItem } from '@opentiny/tiny-engine-common'
 import { iconSetting, iconClose } from '@opentiny/vue-icon'
 
 export default {
   components: {
-    ConfigGroup,
-    ConfigItem,
     IconSetting: iconSetting(),
     IconClose: iconClose()
   },

packages/canvas/src/components/render/RenderMain.js

@@ -18,6 +18,8 @@ import { generateFunction } from '@opentiny/tiny-engine-controller/utils'
 import renderer, { parseData, setConfigure, setController, globalNotify, isStateAccessor } from './render'
 import { getNode as getNodeById, clearNodes, getRoot, setContext, getContext, setCondition, context } from './context'
 import CanvasEmpty from './CanvasEmpty.vue'
+import { getCurrent, setLocales, updateRect, addStyle, addScript, canvasDispatch } from '../container/container'
+import Builtin from '../builtin/builtin.json'
 
 const { BROADCAST_CHANNEL } = constants
 
@@ -422,7 +424,15 @@ export const api = {
   getGlobalState,
   getDataSourceMap,
   setDataSourceMap,
-  setGlobalState
+  setGlobalState,
+  getCurrent, 
+  setLocales,
+  getNodeById: getNode,
+  updateRect,
+  addStyle, 
+  addScript, 
+  canvasDispatch
 }
 
 window.api = api
+window.Builtin = Builtin

packages/canvas/src/components/render/runner.js

@@ -13,7 +13,7 @@
 import * as Vue from 'vue'
 import * as VueI18n from 'vue-i18n'
 import { addScript, addStyle, dynamicImportComponents, updateDependencies } from '../common'
-import TinyI18nHost, { I18nInjectionKey } from '@opentiny/tiny-engine-common/js/i18n'
+import TinyI18nHost, { I18nInjectionKey } from '@opentiny/tiny-engine-controller/js/i18n'
 import * as TinyWebcomponentCore from '@opentiny/tiny-engine-webcomponent-core'
 import TinyVue from '@opentiny/vue'
 import * as TinyVueIcon from '@opentiny/vue-icon'

packages/common/component/ConfigItem.vue

@@ -103,14 +103,14 @@ import { inject, computed, watch, ref, reactive, provide } from 'vue'
 import { Popover, Tooltip } from '@opentiny/vue'
 import { IconWriting, IconHelpCircle, IconPlusCircle } from '@opentiny/vue-icon'
 import { typeOf } from '@opentiny/vue-renderless/common/type'
-import i18n from '../js/i18n'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 import { MetaComponents } from '../index'
 import MetaBindVariable from './MetaBindVariable.vue'
 import MetaCodeEditor from './MetaCodeEditor.vue'
 import MultiTypeSelector from './MultiTypeSelector.vue'
 import { useHistory, useProperties, useResource, useLayout, useCanvas } from '@opentiny/tiny-engine-controller'
 import { generateFunction } from '@opentiny/tiny-engine-controller/utils'
-import { SCHEMA_DATA_TYPE, PAGE_STATUS, TYPES } from '../js/constants'
+import { SCHEMA_DATA_TYPE, PAGE_STATUS, TYPES } from '@opentiny/tiny-engine-controller/js/constants'
 
 const hasRule = (required, rules) => {
   if (required) {

packages/common/component/LifeCycles.vue

@@ -84,8 +84,8 @@ import { getSchema } from '@opentiny/tiny-engine-canvas'
 import MetaListItems from './MetaListItems.vue'
 import { iconYes } from '@opentiny/vue-icon'
 import VueMonaco from './VueMonaco.vue'
-import { initCompletion } from '../js/completion'
-import { initLinter, lint } from '../js/linter'
+import { initCompletion } from '@opentiny/tiny-engine-controller/js/completion'
+import { initLinter, lint } from '@opentiny/tiny-engine-controller/js/linter'
 import { SvgButton } from '../index'
 
 export default {

packages/common/component/MetaBindVariable.vue

@@ -128,10 +128,10 @@ import { useCanvas, useResource, useLayout, useApp, useProperties, useData } fro
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
 import { constants } from '@opentiny/tiny-engine-utils'
 import SvgButton from './SvgButton.vue'
-import { parse, traverse, generate } from '../js/ast'
-import { DEFAULT_LOOP_NAME } from '../js/constants.js'
+import { parse, traverse, generate } from '@opentiny/tiny-engine-controller/js/ast'
+import { DEFAULT_LOOP_NAME } from '@opentiny/tiny-engine-controller/js/constants'
 import MonacoEditor from './VueMonaco.vue'
-import { formatString } from '../js/ast.js'
+import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
 
 const { EXPRESSION_TYPE } = constants
 

packages/common/component/MetaButtonGroup.vue

@@ -11,7 +11,7 @@
 <script>
 import { ref, watchEffect } from 'vue'
 import { ButtonGroup } from '@opentiny/vue'
-import i18n from '../js/i18n'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 
 export default {
   name: 'MetaButtonGroup',

packages/common/component/MetaCascader.vue

@@ -16,7 +16,7 @@
 <script>
 import { ref, watchEffect } from 'vue'
 import { Cascader } from '@opentiny/vue'
-import i18n from '../js/i18n'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 
 export default {
   name: 'MetaCascader',

packages/common/component/MetaCheckboxGroup.vue

@@ -10,7 +10,7 @@
 <script>
 import { ref, watchEffect, computed } from 'vue'
 import { CheckboxGroup } from '@opentiny/vue'
-import i18n from '../js/i18n'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 
 export default {
   name: 'MetaCheckboxGroup',

packages/common/component/MetaCodeEditor.vue

@@ -70,8 +70,8 @@ import { reactive, ref, computed, watchEffect, nextTick } from 'vue'
 import { Button, DialogBox } from '@opentiny/vue'
 import { iconChevronDown, iconChevronUp } from '@opentiny/vue-icon'
 import VueMonaco from './VueMonaco.vue'
-import i18n from '../js/i18n'
-import { formatString } from '../js/ast.js'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
+import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
 
 export default {
   components: {

packages/common/component/MetaJsSlot.vue

@@ -37,7 +37,7 @@ import { ref, inject, watchEffect, reactive } from 'vue'
 import { Input, Tooltip, Form, FormItem } from '@opentiny/vue'
 import { useProperties, useCanvas, useModal } from '@opentiny/tiny-engine-controller'
 import SvgICons from '@opentiny/vue-icon'
-import { verifyJsVarName } from '../js/verification'
+import { verifyJsVarName } from '@opentiny/tiny-engine-controller/js/verification'
 
 export default {
   components: {

packages/common/component/MetaRadioGroup.vue

@@ -21,7 +21,7 @@
 <script>
 import { ref, watchEffect, computed } from 'vue'
 import { RadioGroup, RadioButton } from '@opentiny/vue'
-import i18n from '../js/i18n'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 
 export default {
   name: 'MetaRadioGroup',

packages/common/component/MetaSelect.vue

@@ -45,7 +45,7 @@
 <script>
 import { computed, reactive, watchEffect } from 'vue'
 import { Select, Option, OptionGroup, Tooltip } from '@opentiny/vue'
-import i18n from '../js/i18n'
+import i18n from '@opentiny/tiny-engine-controller/js/i18n'
 
 export default {
   components: {

packages/common/component/SaveNewBlock.vue

@@ -37,7 +37,7 @@
 import { reactive, computed, ref } from 'vue'
 import { Input, Form, FormItem, Button, DialogBox, Select } from '@opentiny/vue'
 import { useBlock, useLayout, useCanvas, useModal } from '@opentiny/tiny-engine-controller'
-import { REGEXP_BLOCK_NAME } from '../js/verification'
+import { REGEXP_BLOCK_NAME } from '@opentiny/tiny-engine-controller/js/verification'
 
 export default {
   components: {

packages/common/component/VueMonaco.vue

@@ -4,7 +4,7 @@
 <script>
 import * as monacoEditor from 'monaco-editor'
 import { watch, onMounted, nextTick, onBeforeUnmount, ref } from 'vue'
-import { formatString } from '../js/ast.js'
+import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
 
 export default {
   name: 'MonacoEditor',

packages/common/index.js

@@ -80,7 +80,7 @@ import ProgressBar from './component/ProgressBar.vue'
 import MetaButtonGroup from './component/MetaButtonGroup.vue'
 import MetaTableColumns from './component/MetaTableColumns.vue'
 
-import i18n, { i18nKeyMaps } from './js/i18n.js'
+import i18n, { i18nKeyMaps } from '@opentiny/tiny-engine-controller/js/i18n'
 
 import enUs from './i18n/en-us.json'
 import zhCn from './i18n/zh-cn.json'
@@ -90,6 +90,20 @@ const { mergeLocaleMessage } = i18n.global
 mergeLocaleMessage(i18nKeyMaps.enUS, enUs)
 mergeLocaleMessage(i18nKeyMaps.zhCN, zhCn)
 
+const globalComponents = {
+  SaveNewBlock,
+  ConfigGroup,
+  ConfigItem
+}
+
+export const injectGlobalComponents = {
+  install: (app) => {
+    Object.entries(globalComponents).forEach(([name, component]) => {
+      app.component(name, component)
+    })
+  }
+}
+
 export const MetaComponents = {
   MetaArrayItem,
   MetaBindI18n,

packages/common/package.json

@@ -10,12 +10,10 @@
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {
-    ".": "./dist/index.js",
-    "./js/*": "./js/*.js"
+    ".": "./dist/index.js"
   },
   "files": [
-    "dist",
-    "js"
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -29,20 +27,14 @@
   "license": "MIT",
   "homepage": "https://opentiny.design/tiny-engine",
   "dependencies": {
-    "@babel/generator": "7.18.13",
-    "@babel/parser": "7.18.13",
-    "@babel/traverse": "7.18.13",
     "@opentiny/tiny-engine-canvas": "workspace:*",
     "@opentiny/tiny-engine-controller": "workspace:*",
     "@opentiny/tiny-engine-http": "workspace:*",
-    "@opentiny/tiny-engine-i18n-host": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
     "@opentiny/vue": "~3.10.0",
     "@opentiny/vue-icon": "~3.10.0",
-    "@opentiny/vue-locale": "~3.10.0",
     "@opentiny/vue-renderless": "~3.10.0",
     "@vue/shared": "^3.3.4",
-    "css-tree": "^2.3.1",
     "monaco-editor": "0.33.0",
     "prettier": "2.7.1",
     "vue-draggable-next": "2.1.0"
@@ -53,7 +45,6 @@
     "vite": "^4.3.7"
   },
   "peerDependencies": {
-    "vue": "^3.4.15",
-    "vue-i18n": "^9.9.0"
+    "vue": "^3.4.15"
   }
 }

packages/common/js/index.js → packages/controller/js/canvas.js

@@ -11,7 +11,8 @@
  */
 
 import { PAGE_STATUS } from './constants'
-import { useEditorInfo, useResource } from '@opentiny/tiny-engine-controller'
+import useEditorInfo from '../src/useEditorInfo'
+import useResource from '../src/useResource'
 
 export const getCanvasStatus = (data) => {
   // 写死ID 待删除

packages/common/js/completion.js → packages/controller/js/completion.js

@@ -10,7 +10,8 @@
  *
  */
 
-import { useCanvas, useResource } from '@opentiny/tiny-engine-controller'
+import useCanvas from '../src/useCanvas'
+import useResource from '../src/useResource'
 
 const keyWords = [
   'state',

packages/common/js/css.js → packages/controller/js/css.js

@@ -11,7 +11,7 @@
  */
 
 import * as cssTree from 'css-tree'
-import { hyphenate } from '@opentiny/tiny-engine-controller/utils'
+import { hyphenate } from '../utils'
 
 /**
  * 传入 css 字符串，得到以选择器为 Key，css 规则为 value 的 object

packages/common/js/http.js → packages/controller/js/http.js

@@ -11,7 +11,9 @@
  */
 
 import { useHttp } from '@opentiny/tiny-engine-http'
-import { usePage, useCanvas, useNotify } from '@opentiny/tiny-engine-controller'
+import usePage from '../src/usePage'
+import useCanvas from '../src/useCanvas'
+import useNotify from '../src/useNotify'
 import { isVsCodeEnv } from './environments'
 import { generateRouter, generatePage } from './vscodeGenerateFile'
 

packages/common/js/preview.js → packages/controller/js/preview.js

@@ -12,7 +12,7 @@
 
 import { constants } from '@opentiny/tiny-engine-utils'
 import { isDevelopEnv } from './environments'
-import { useResource } from '@opentiny/tiny-engine-controller'
+import useResource from '../src/useResource'
 // prefer old unicode hacks for backward compatibility
 
 const { COMPONENT_NAME } = constants