chore: add gitlab-ci pages demo

lian-t · Jan 28, 2021 · 6b9e3df · 6b9e3df
1 parent 63deaf1
commit 6b9e3df
Show file tree

Hide file tree

Showing 8 changed files with 205 additions and 109 deletions.
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
@@ -0,0 +1,23 @@
+stages:
+  - test
+  - deploy
+
+test:
+  stage: test
+  image: node:14.15.4-alpine
+  script:
+    - npm install
+    - npm run test
+
+pages:
+  image: node:14.15.4-alpine
+  stage: deploy
+  only:
+    - master
+  script:
+    - npm install
+    - npm run build
+    - cp -Rp dist/umd/* public/
+  artifacts:
+    paths:
+      - public
diff --git a/public/demo.html b/public/demo.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>XMind Embed Viewer (Development)</title>
+</head>
+<body>
+</body>
+<script src="xmind-embed-viewer.js"></script>
+<script>
+  const init = async () => {
+
+    const container = document.createElement('div')
+    document.body.append(container)
+    const res = await fetch('/test-1.xmind')
+    const viewer = new XMindEmbedViewer({
+      el: container,
+      file: await res.arrayBuffer(),
+      styles: {
+        'height': '500px',
+        'width': '100%'
+      }
+    })
+
+    const eventLogsElement = document.createElement('div')
+    eventLogsElement.style.height = '500px'
+    eventLogsElement.style.overflow = 'scroll'
+
+    const log = (type, message) => eventLogsElement.innerHTML += `<div style="margin-top: 8px">[${type}] ${typeof message === 'object' && message? JSON.stringify(message, null, 2) : message }</div>`
+
+    viewer.addEventListener('sheet-switch', payload => log('event: sheet-switch', payload))
+    viewer.addEventListener('zoom-scale-change', payload => log('event: zoom-scale-change', payload))
+    viewer.addEventListener('sheets-change', payload => log('event: sheets-change', payload))
+    viewer.addEventListener('map-ready', payload => log('event: map-ready', payload))
+
+    const loadFile1Button = document.createElement('button')
+    loadFile1Button.textContent = 'Load File 1'
+    loadFile1Button.addEventListener('click', async () => {
+      const res = await fetch('/test-1.xmind')
+      viewer.openFile(await res.arrayBuffer())
+    })
+
+    const loadFile2Button = document.createElement('button')
+    loadFile2Button.textContent = 'Load File 2'
+    loadFile2Button.addEventListener('click', async () => {
+      const res = await fetch('/test-2.xmind')
+      viewer.openFile(await res.arrayBuffer())
+    })
+
+    document.body.appendChild(loadFile1Button)
+    document.body.appendChild(loadFile2Button)
+    document.body.appendChild(eventLogsElement)
+
+    window.viewer = viewer
+  }
+
+  init()
+</script>
+</html>
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>XMind Embed Viewer (Development)</title>
+</head>
+<body>
+</body>
+<script src="xmind-embed-viewer.js"></script>
+<script>
+  const init = async () => {
+
+    const container = document.createElement('div')
+    document.body.append(container)
+    const res = await fetch('/test-1.xmind')
+    const viewer = new XMindEmbedViewer({
+      el: container,
+      file: await res.arrayBuffer(),
+      styles: {
+        'height': '500px',
+        'width': '100%'
+      }
+    })
+
+    const eventLogsElement = document.createElement('div')
+    eventLogsElement.style.height = '500px'
+    eventLogsElement.style.overflow = 'scroll'
+
+    const log = (type, message) => eventLogsElement.innerHTML += `<div style="margin-top: 8px">[${type}] ${typeof message === 'object' && message? JSON.stringify(message, null, 2) : message }</div>`
+
+    viewer.addEventListener('sheet-switch', payload => log('event: sheet-switch', payload))
+    viewer.addEventListener('zoom-scale-change', payload => log('event: zoom-scale-change', payload))
+    viewer.addEventListener('sheets-change', payload => log('event: sheets-change', payload))
+    viewer.addEventListener('map-ready', payload => log('event: map-ready', payload))
+
+    const loadFile1Button = document.createElement('button')
+    loadFile1Button.textContent = 'Load File 1'
+    loadFile1Button.addEventListener('click', async () => {
+      const res = await fetch('/test-1.xmind')
+      viewer.openFile(await res.arrayBuffer())
+    })
+
+    const loadFile2Button = document.createElement('button')
+    loadFile2Button.textContent = 'Load File 2'
+    loadFile2Button.addEventListener('click', async () => {
+      const res = await fetch('/test-2.xmind')
+      viewer.openFile(await res.arrayBuffer())
+    })
+
+    document.body.appendChild(loadFile1Button)
+    document.body.appendChild(loadFile2Button)
+    document.body.appendChild(eventLogsElement)
+
+    window.viewer = viewer
+  }
+
+  init()
+</script>
+</html>
diff --git a/statics/test-1.xmind → public/test-1.xmind b/statics/test-1.xmind → public/test-1.xmind
diff --git a/statics/test-2.xmind → public/test-2.xmind b/statics/test-2.xmind → public/test-2.xmind
diff --git a/statics/development.html b/statics/development.html
diff --git a/tsconfig.esm.json b/tsconfig.esm.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "strict": true,
     "sourceMap": true,
-    "target": "ES2015",
+    "target": "ESNext",
     "moduleResolution": "node",
     "module": "esnext",
     "sourceRoot": "src",
@@ -15,4 +15,4 @@
     "src"
   ],
   "exclude": ["node_modules"]
-}
+}
diff --git a/webpack.config.ts b/webpack.config.ts
@@ -2,71 +2,72 @@ import * as path from 'path'
 import { Configuration, EnvironmentPlugin } from 'webpack'
 
 const commonConfig: Partial<Configuration> = {
-    devtool: 'source-map',
-    entry: './src/index.ts',
-    module: {
-        rules: [
-            { test: /\.tsx?$/, loader: 'ts-loader' }
-        ]
-    },
-    resolve: {
-        extensions: ['.js', '.ts'],
-    },
+  entry: './src/index.ts',
+  module: {
+    rules: [
+      {test: /\.tsx?$/, loader: 'ts-loader'}
+    ]
+  },
+  resolve: {
+    extensions: ['.js', '.ts'],
+  },
 }
 
 const config: Configuration[] = [
-    {
-        ...commonConfig,
-        name: 'dev',
-        mode: 'development',
-        output: {
-            library: 'XMindEmbedViewer',
-            libraryTarget: 'umd',
-            libraryExport: 'XMindEmbedViewer',
-            path: path.join(__dirname, 'dist'),
-            filename: '[name].js'
-        },
-        //
-        // https://github.com/webpack/webpack-dev-server/issues/2663
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        devServer: {
-            port: 9000,
-            static: [
-                path.resolve('./statics')
-            ],
-            compress: true,
-            hot: true,
-            https: false,
-        },
-        plugins: [
-            new EnvironmentPlugin({
-                'EMBED_VIEWER_URL': process.env['EMBED_VIEWER_URL'] || 'http://localhost:8088/embed',
-                'EMBED_VIEWER_DOMAIN': process.env['EMBED_VIEWER_DOMAIN'] || 'http://localhost:8088'
-            })
-        ]
+  {
+    ...commonConfig,
+    name: 'dev',
+    mode: 'development',
+    devtool: 'inline-source-map',
+    output: {
+      library: 'XMindEmbedViewer',
+      libraryTarget: 'umd',
+      libraryExport: 'XMindEmbedViewer',
+      path: path.join(__dirname, 'dist'),
+      filename: 'xmind-embed-viewer.js'
+    },
+    //
+    // https://github.com/webpack/webpack-dev-server/issues/2663
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    devServer: {
+      port: 9000,
+      static: [
+        path.resolve('./public')
+      ],
+      compress: true,
+      hot: true,
+      https: false,
+    },
+    plugins: [
+      new EnvironmentPlugin({
+        'EMBED_VIEWER_URL': process?.env['EMBED_VIEWER_URL'] || 'https://beta.xmind.net/embed',
+        'EMBED_VIEWER_DOMAIN': process?.env['EMBED_VIEWER_DOMAIN'] || 'https://beta.xmind.net'
+      })
+    ]
+  },
+  {
+    ...commonConfig,
+    name: 'prod-umd',
+    mode: 'production',
+    devtool: 'source-map',
+    output: {
+      library: 'XMindEmbedViewer',
+      libraryTarget: 'umd',
+      libraryExport: 'XMindEmbedViewer',
+      path: path.join(__dirname, 'dist/umd'),
+      filename: 'xmind-embed-viewer.js'
     },
-    {
-        ...commonConfig,
-        name: 'prod-umd',
-        mode: 'production',
-        output: {
-            library: 'XMindEmbedViewer',
-            libraryTarget: 'umd',
-            libraryExport: 'XMindEmbedViewer',
-            path: path.join(__dirname, 'dist/umd'),
-            filename: 'xmind-embed-viewer.js'
-        },
-        plugins: [
-            new EnvironmentPlugin({
-                'EMBED_VIEWER_URL': process.env['EMBED_VIEWER_URL'] || 'http://localhost:8088/embed',
-                'EMBED_VIEWER_DOMAIN': process.env['EMBED_VIEWER_DOMAIN'] || 'http://localhost:8088'
-            })
-        ],
-        optimization: {
-            minimize: true
-        }
+    plugins: [
+      new EnvironmentPlugin({
+        'EMBED_VIEWER_URL': process?.env['EMBED_VIEWER_URL'] || 'https://beta.xmind.net/embed',
+        'EMBED_VIEWER_DOMAIN': process?.env['EMBED_VIEWER_DOMAIN'] || 'https://beta.xmind.net'
+      })
+    ],
+    optimization: {
+      minimize: true
     }
+  }
 ]
 
-export default config
+export default config