feat:add studio iframe

antvis · Nov 16, 2019 · e561182 · e561182
1 parent 49b1162
commit e561182
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 496 deletions.
diff --git a/packages/graphin-site/site/pages/GraphinStudio.zh.tsx b/packages/graphin-site/site/pages/GraphinStudio.zh.tsx
@@ -2,16 +2,20 @@ import React from 'react';
 import { Skeleton } from 'antd';
 import { useTranslation } from 'react-i18next';
 import SEO from '@antv/gatsby-theme-antv/site/components/Seo';
-// import GraphinStudio from '@antv/graphin-studio';
 
 const IndexPage = () => {
     const { t } = useTranslation();
     return (
         <>
             <SEO title="蚂蚁数据可视化" lang="zh" />
             <div style={{ margin: '0 auto', padding: '0 60px' }}>
-                grahpin studio app
-                {/* <GraphinStudio /> */}
+                <iframe
+                    src="https://antvis.github.io/graphin-studio-site/#/graphin-studio"
+                    title="graphin-studio"
+                    style={{ width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
+                    allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+                    sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+                />
             </div>
         </>
     );

diff --git a/packages/graphin-studio/package.json b/packages/graphin-studio/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "start": " node --max_old_space_size=8192 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot --env.NODE_ENV=development",
     "build": "node --max_old_space_size=8192 ./node_modules/webpack/bin/webpack.js  --env.NODE_ENV=production  -c ./webpack.config.js ",
-    "lib": "node --max_old_space_size=8192 ./node_modules/webpack/bin/webpack.js --env.type=lib --env.NODE_ENV=production  -c ./webpack.config.js"
+    "deploy": "npm run build && gh-pages -d ./dist -r https://github.com/antvis/graphin-studio-site.git"
   },
   "dependencies": {
     "@antv/graphin": "^1.0.0",
@@ -36,6 +36,7 @@
     "css-loader": "^3.2.0",
     "deepmerge": "^4.1.1",
     "file-loader": "^4.2.0",
+    "gh-pages": "^2.1.1",
     "html-webpack-plugin": "^3.2.0",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",

diff --git a/packages/graphin-studio/public/index.html b/packages/graphin-studio/public/index.html
@@ -1,21 +1,18 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <title>example</title>
-  <meta name="keywords" content= "react,component" />
-  <meta name="description" content="example" />
-  <link rel="stylesheet" href="https://cdn.bootcss.com/antd/3.23.3/antd.min.css">
-  <style type="text/css">
-
-
-    /* custom class */
-
-  </style>
-</head>
-<body>
-  <div id="root"></div>
-
-
-</body>
-</html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <title>example</title>
+        <meta name="keywords" content="react,component" />
+        <meta name="description" content="example" />
+        <link rel="stylesheet" href="https://cdn.bootcss.com/antd/3.23.3/antd.min.css" />
+        <style type="text/css">
+            /* custom class */
+        </style>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script src="https://gw.alipayobjects.com/os/lib/react/16.12.0/umd/react.production.min.js"></script>
+        <script src="https://gw.alipayobjects.com/os/lib/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
+    </body>
+</html>
diff --git a/packages/graphin-studio/webpack.config.js b/packages/graphin-studio/webpack.config.js
@@ -5,29 +5,18 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 // const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 
 module.exports = env => {
-    const isLib = env.type === 'lib';
-    const externals = isLib
-        ? {
-              react: {
-                  commonjs: 'react',
-                  commonjs2: 'react',
-                  amd: 'react',
-                  root: 'React',
-              },
-              'react-dom': {
-                  commonjs: 'react-dom',
-                  commonjs2: 'react-dom',
-                  amd: 'react-dom',
-                  root: 'ReactDOM',
-              },
-          }
-        : {};
+    const isPrd = env.NODE_ENV === 'production';
+    const alias = isPrd
+        ? {}
+        : {
+              react: require.resolve('react'),
+          };
     return {
         entry: {
             bundle: './src/index.tsx',
             app: './src/GraphinStudio.tsx',
         },
-        mode: process.env.NODE_ENV,
+        mode: env.NODE_ENV,
         module: {
             rules: [
                 {
@@ -95,11 +84,11 @@ module.exports = env => {
         resolve: {
             extensions: ['*', '.ts', '.tsx', '.js', '.jsx'],
             alias: {
-                react: require.resolve('react'),
                 '@types': path.resolve('./', 'src', 'types.ts'),
                 '@service': path.resolve('./', 'src', 'Service'),
                 '@utils': path.resolve('./', 'src', 'Utils/'),
                 '@com': path.resolve('./', 'src', 'Components/'),
+                ...alias,
             },
         },
         devtool: 'cheap-module-eval-source-map',
@@ -126,6 +115,19 @@ module.exports = env => {
                 chunks: ['bundle'],
             }),
         ],
-        externals,
+        externals: {
+            react: {
+                commonjs: 'react',
+                commonjs2: 'react',
+                amd: 'react',
+                root: 'React',
+            },
+            'react-dom': {
+                commonjs: 'react-dom',
+                commonjs2: 'react-dom',
+                amd: 'react-dom',
+                root: 'ReactDOM',
+            },
+        },
     };
 };
diff --git a/packages/graphin/README-en.US.md b/packages/graphin/README-en.US.md
@@ -0,0 +1 @@
+## coming soon