Release 2.2: Monorepo

.test-esm-loader.mjs

@@ -0,0 +1,30 @@
+// https://ar.al/2021/05/27/make-anything-a-javascript-module-using-node.js-esm-module-loaders/
+// this is for test cases running `import … from '…svg?raw'`
+
+import { URL } from 'url'
+
+export default {
+  loaders: [
+    {
+      resolve(specifier, opts) {
+        if (specifier.endsWith('.svg')) {
+          let { parentURL } = opts
+          let url = new URL(specifier, parentURL).href
+          return { url }
+        }
+      },
+      format(url, opts) {
+        if (url.endsWith('.svg')) {
+          return { format: 'module' }
+        }
+      },
+      transform(source, opts) {
+        if (opts.url.endsWith('.svg')) {
+          return {
+            source: `export default ${JSON.stringify(source)}`
+          }
+        }
+      }
+    }
+  ]
+}

index.html

@@ -10,6 +10,9 @@
 html {
   font-size: 10px;
 }
+body {
+  margin: 0;
+}
 
   </style>
 </head>

jest.config.js → jest.config.mjs

@@ -1,4 +1,8 @@
-module.exports = {
+import module from 'node:module'
+
+module.register('./.test-esm-loader.mjs', import.meta.url)
+
+export default {
   preset: 'ts-jest/presets/default',
   moduleFileExtensions: ['js', 'ts', 'jsx', 'tsx'],
   // ↓ DO NOT try to make test work w/ node16 esmodule support
@@ -25,4 +29,4 @@ module.exports = {
   },
 
   resetMocks: true
-};
+}

layouts-example/counter/index.tsx

@@ -1,7 +1,7 @@
 import { h, Fragment } from 'preact'
 import * as preactHooks from 'preact/hooks'
 
-import PreactLayout from '../../src/layout/preact'
+import { PreactLayout } from '@day1co/fastcomposer-layout/layouts'
 
 export default new PreactLayout({
   id: 'counter',

package.json

@@ -1,8 +1,14 @@
 {
   "name": "@day1co/fastcomposer",
-  "version": "2.1.7",
+  "version": "2.2.0",
   "author": "fastcampus",
   "main": "./dist/fastcomposer.js",
+  "workspaces": [
+    "./src/layout",
+    "./src/page",
+    "./src/state"
+  ],
+  "type": "module",
   "exports": {
     ".": {
       "import": "./dist/fastcomposer.mjs",
@@ -19,33 +25,20 @@
   "scripts": {
     "serve": "vite",
     "build": "vite build",
-    "lint": "vue-cli-service lint",
+    "build-all": "npm run build --workspaces && vite build",
     "build-layouts": "node layouts/build.js",
-    "test": "jest",
-    "test:e2e": "cypress run --browser chrome --headless",
-    "test:e2e-visible": "cypress open",
-    "ci:test": "./ci_test.sh"
+    "test": "jest"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/day1co/fastcomposer.git"
   },
   "dependencies": {
-    "@types/lodash.template": "^4.5.1",
     "@vue-a11y/focus-loop": "^0.2.0",
-    "lodash": "^4.17.20",
-    "lodash.template": "^4.5.0",
-    "marked": "^4.0.18",
-    "normalize.css": "^8.0.1",
-    "sass-mq": "^5.0.1",
     "splitpanes": "^2.4.1",
     "vue": "^2.6.12",
     "vue-smooth-dnd": "^0.8.1"
   },
-  "peerDependencies": {
-    "preact": "^10.11.2",
-    "preact-render-to-string": "^5.2.6"
-  },
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
@@ -66,10 +59,11 @@
     "jest": "^29.0.2",
     "jsdom": "^20.0.2",
     "prettier": "2.0.5",
-    "sass": "^1.32.8",
+    "sass": "1.32.x",
     "ts-jest": "^29.0.3",
-    "typescript": "^4.8.3",
-    "vite": "^4.4.9",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.3",
+    "vite-plugin-dts": "^4.1.0",
     "vite-plugin-raw": "^1.0.3",
     "vue-eslint-parser": "^7.1.0",
     "vue-template-compiler": "^2.6.12"

src/_tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": [
+    "./*.ts",
+    "./**/*.ts"
+  ],
+  "exclude": [
+    "./test"
+  ]
+}

src/_vite.config.mjs

@@ -0,0 +1,23 @@
+import path from 'node:path'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import viteRawPlugin from 'vite-plugin-raw'
+
+export default dirname => defineConfig({
+  root: dirname,
+  plugins: [
+    dts(),
+    viteRawPlugin({
+      match: /\.(ejs|svg)$/i
+    })
+  ],
+  build: {
+    sourcemap: true,
+    lib: {
+      entry: {
+        index: path.join(dirname, './index.ts')
+      },
+      formats: ['es']
+    }
+  }
+})

src/layout/index.ts

@@ -1,8 +1,4 @@
-import type LayoutMeta from '../structs/LayoutMeta'
-import type LayoutParameter from '../structs/LayoutParameter'
-import type { ListLayoutParameter } from '../structs/LayoutParameter'
-
-import { clone } from '../util'
+import type { LayoutMeta, LayoutParameter, ListLayoutParameter } from './structs'
 
 export interface LayoutOptions {
   id: string
@@ -32,7 +28,7 @@ abstract class LayoutBase {
     } else if(!this.defaultValues) {
       params = this.params
     } else {
-      return clone(this.defaultValues)
+      return structuredClone(this.defaultValues)
     }
 
     const entries = [ ...params.entries() ]
@@ -79,8 +75,8 @@ export default LayoutBase
 
 ///
 
-export abstract class DynamicLayoutBase extends LayoutBase {
-  override template: (opt: any, ctx: any) => any
+export interface DynamicLayoutBase extends LayoutBase {
+  template: (opt: any, ctx: any) => any
 
   // hydrate above
   hydrate?(el: HTMLElement, opt: any): void

src/layout/layouts/broken.ts

@@ -0,0 +1,11 @@
+import LegacyLayout from './legacy'
+
+// Some pages
+export default new LegacyLayout({
+  id: 'broken',
+  meta: {
+    description: '다른 레이아웃으로 새 레이어를 만들고 이 레이어는 삭제하세요',
+    icon: ''
+  },
+  params: new Map()
+})

src/layout/layouts/index.ts

@@ -0,0 +1,2 @@
+export { default as LegacyLayout } from './legacy'
+export { default as PreactLayout } from './preact'

src/layout/legacy.ts → src/layout/layouts/legacy.ts

@@ -1,6 +1,6 @@
 import type LayoutMeta from '../structs/LayoutMeta'
 import type LayoutParameter from '../structs/LayoutParameter'
-import type { LayoutOptions } from '.'
+import type { LayoutOptions } from '..'
 import type {
   SingularLayoutParameter,
   ListLayoutParameter,
@@ -11,7 +11,7 @@ import type {
 import lotemplate from 'lodash.template'
 import { marked } from 'marked'
 
-import LayoutBase from '.'
+import LayoutBase from '..'
 
 const paramArrayToMap = (params: Array<LegacyLayoutParameter>):
   Map<string, LayoutParameter> =>

src/layout/preact.ts → src/layout/layouts/preact.ts

@@ -1,27 +1,27 @@
-import type { LayoutOptions } from '.'
+import type { LayoutOptions } from '..'
 
 import renderToString from 'preact-render-to-string'
-import preact from 'preact'
+import * as preact from 'preact'
 import { h, Fragment } from 'preact'
 
-import { DynamicLayoutBase } from '.'
+import { DynamicLayoutBase } from '..'
 
 export default class PreactLayout extends DynamicLayoutBase {
 
   constructor(layout: LayoutOptions) {
     super(layout)
 
-    this.component = opt => h(layout.template, { opt })
+    this.template = opt => h(layout.template, { opt })
   }
 
   render(el: HTMLElement, opt: any): unknown {
-    return preact.render(this.component(opt), el)
+    return preact.render(this.template(opt, null), el)
   }
   renderToString(opt: any): string {
-    return renderToString(this.component(opt))
+    return renderToString(this.template(opt, null))
   }
   hydrate(el: HTMLElement, opt: any): void {
-    return preact.hydrate(this.component(opt), el)
+    return preact.hydrate(this.template(opt, null), el)
   }
 
 }

src/layout/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@day1co/fastcomposer-layout",
+  "version": "2.2.0",
+  "type": "module",
+  "files": [
+    "dist",
+    "layouts",
+    "structs",
+    "*.d.ts"
+  ],
+  "main": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./layouts": "./dist/layouts.js",
+    "./structs": "./dist/structs.js"
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepack": "vite build",
+    "clean": "rm -rf ./dist ./node_modules"
+  },
+  "dependencies": {
+    "@types/lodash.template": "^4.5.1",
+    "lodash.template": "^4.5.0",
+    "marked": "^4.0.18"
+  },
+  "peerDependencies": {
+    "preact": "^10.11.2",
+    "preact-render-to-string": "^5.2.6"
+  }
+}

src/layout/structs/LayoutMigration.ts

@@ -0,0 +1,9 @@
+type LayoutMigration = {
+  name: string
+  options: any
+  // TODO fix type of options (was typeof this.options)
+  requires(options, layout, values): boolean
+  migrate(options, layout, values): any
+}
+
+export default LayoutMigration

src/Structs/Snippet.ts → src/layout/structs/Snippet.ts

@@ -1,4 +1,4 @@
-import type { LayerMeta } from '../page/layer'
+import type { LayerMeta } from '../../page/layer'
 
 export type SnippetItem = {
   layout: string,

src/layout/structs/index.ts

@@ -0,0 +1,10 @@
+export type { default as LayoutMeta } from './LayoutMeta'
+export type * from './LayoutMeta'
+
+export type { default as LayoutMigration } from './LayoutMigration'
+
+export type { default as LayoutParameter } from './LayoutParameter'
+export type * from './LayoutParameter'
+
+export type { default as Snippet } from './Snippet'
+export type * from './Snippet'

src/layout/test/layouts/legacy.ts

@@ -1,4 +1,4 @@
-import LegacyLayout from '../../legacy'
+import LegacyLayout from '../../layouts/legacy'
 
 export default LegacyLayout.fromDefinition({
   id: 'list',

src/layout/test/layouts/preact.tsx

@@ -1,7 +1,7 @@
 import { h, Fragment } from 'preact'
 import preactHooks from 'preact/hooks'
 
-import PreactLayoutBase from '../../preact'
+import PreactLayoutBase from '../../layouts/preact'
 
 export default new PreactLayoutBase({
   id: 'preact-example',

src/layout/tsconfig.json

@@ -0,0 +1 @@
+../_tsconfig.json

src/layout/vite.config.mjs

@@ -0,0 +1,17 @@
+import path from 'node:path'
+import { defineConfig, mergeConfig } from 'vite'
+import config from '../_vite.config.mjs'
+
+export default defineConfig(
+  mergeConfig(config(__dirname), {
+    build: {
+      lib: {
+        entry: {
+          index: path.join(__dirname, './index.ts'),
+          layouts: path.join(__dirname, './layouts/index.ts'),
+          structs: path.join(__dirname, './structs/index.ts'),
+        },
+      },
+    }
+  })
+)

src/legacy/assets/scss/style.scss

@@ -2,12 +2,11 @@
 @import 'utils/utilities';
 
 // vendors
-@import 'sass-mq';
-@import 'normalize.css';
 @import 'splitpanes';
-@import 'pane';
 
 // base
+@import 'pane';
+
 @import 'base/color-scheme';
 @import 'base/fonts';
 @import 'base/helpers';

src/legacy/components/edit/file.vue

@@ -32,7 +32,7 @@
 
 <script>
 
-import { uniqueId } from '../../../util'
+import { uniqueId } from '../../utils'
 
 import EventBus from '../../event-bus.vue'
 import mixin from './mixin.js'

src/legacy/components/edit/index.vue

@@ -13,8 +13,7 @@
 
 <script>
 
-import Layer from '../../../page/layer'
-import Path from '../../../page/path'
+import { Layer, Path } from '@day1co/fastcomposer-page'
 import EditEntry from './entry.vue'
 
 export default {