Build update (#28)

* build update

README.md

@@ -46,11 +46,10 @@ The library is also available on [npm](https://www.npmjs.com/package/pcui-graph)
 npm install --save @playcanvas/pcui-graph @playcanvas/pcui @playcanvas/observer
 ```
 
-The npm package includes three builds of the library:
+The npm package includes two builds of the library:
 ```
-@playcanvas/pcui-graph/index.js // UMD build, excluding external dependencies (requires dependencies to be placed in the global namespace)
-@playcanvas/pcui-graph/index.mjs // module build, excluding external dependencies (requires a build tool like rollup / webpack)
-@playcanvas/pcui-graph/bundle.mjs // module build, with all external dependencies bundled
+@playcanvas/pcui-graph/dist/pcui-graph.js // UMD build (requires that the pcui and observer libraries are present in the global namespace)
+@playcanvas/pcui-graph/dist/pcui-graph.mjs // module build (requires a build tool like rollup / webpack)
 ```
 
 ## Storybook

conf-tsd.json

@@ -0,0 +1,11 @@
+{
+    "source": {
+        "include": ["src/index.js"]
+    },
+    "opts": {
+        "destination": "dist",
+        "outFile": "pcui-graph.d.ts",
+        "recurse": true,
+        "template": "node_modules/tsd-jsdoc/dist"
+    }
+}

package.json

@@ -1,11 +1,13 @@
 {
   "name": "@playcanvas/pcui-graph",
-  "version": "1.1.4",
+  "version": "2.0.0",
   "author": "PlayCanvas <support@playcanvas.com>",
   "homepage": "https://github.com/playcanvas/pcui-graph",
   "description": "",
   "license": "MIT",
-  "main": "pcui-graph.js",
+  "main": "dist/pcui-graph.js",
+  "module": "dist/pcui-graph.mjs",
+  "types": "dist/pcui-graph.d.ts",
   "bugs": {
     "url": "https://github.com/playcanvas/pcui-graph/issues"
   },
@@ -24,18 +26,23 @@
     "webpack-bundle-analyzer": "^3.8.0"
   },
   "scripts": {
-    "build": "rollup -c --environment target:all",
-    "build:umd": "rollup -c --environment target:umd",
-    "build:module": "rollup -c --environment target:module",
-    "build:bundle": "rollup -c --environment target:bundle",
-    "build:watch": "rollup -c --environment target:all --watch",
-    "build:prod": "NODE_ENV=production rollup -c --environment target:all",
+    "build": "cross-env NODE_ENV=production rollup -c --environment target:all",
+    "watch": "rollup -c --environment target:all --watch",
+    "watch:umd": "rollup -c --environment target:umd --watch",
+    "watch:module": "rollup -c --environment target:module --watch",
     "lint": "eslint --ext .js src",
     "storybook": "start-storybook -p 9010 -s public",
     "build:docs": "typedoc --options typedoc.json; cp ./_docs/classes/Graph.md ./docs/Graph.md; rm -rf ./_docs",
-    "pkg:publish": "rm -rf ./dist/ && npm run build:prod && cp ./package.json dist && cp ./LICENSE dist && cp README.md dist && cp -r ./docs dist && npm publish dist --access=public",
-    "pkg:publish:dry": "rm -rf ./dist/ && npm run build:prod && cp ./package.json dist && cp ./LICENSE dist && cp README.md dist && cp -r ./docs dist && npm publish dist --dry-run --access=public"
+    "tsd": "jsdoc -c conf-tsd.json && node tsd.js"
   },
+  "files": [
+    "dist/pcui-graph.js",
+    "dist/pcui-graph.mjs",
+    "dist/pcui-graph.d.ts",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
   "browserslist": {
     "production": [
       ">0.2%",
@@ -62,7 +69,7 @@
     "@babel/preset-react": "^7.10.4",
     "@playcanvas/eslint-config": "^1.0.6",
     "@playcanvas/observer": "1.1.0",
-    "@playcanvas/pcui": "2.1.1",
+    "@playcanvas/pcui": "2.3.1",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@storybook/addon-actions": "^6.0.3",
@@ -75,10 +82,11 @@
     "@storybook/react": "^6.0.3",
     "babel-loader": "^8.1.0",
     "backbone": "^1.4.0",
+    "cross-env": "^7.0.3",
     "eslint": "^7.10.0",
     "jointjs": "^3.2.0",
     "jquery": "^3.5.1",
-    "jsdoc": "^3.6.5",
+    "jsdoc": "^3.6.10",
     "json-diff": "^0.5.4",
     "json-loader": "^0.5.7",
     "lodash": "^4.17.20",
@@ -98,6 +106,7 @@
     "rollup-plugin-postcss": "^4.0.1",
     "rollup-plugin-sass": "^1.2.6",
     "rollup-plugin-uglify": "^6.0.4",
+    "tsd-jsdoc": "^2.5.0",
     "typedoc": "^0.21.6",
     "typedoc-plugin-markdown": "^3.10.4",
     "typescript": "^4.3.5",

rollup.config.js

@@ -7,10 +7,10 @@ import jscc from 'rollup-plugin-jscc';
 import builtins from 'rollup-plugin-node-builtins';
 import globals from 'rollup-plugin-node-globals';
 
-const umdBuild = {
+const umd = {
     input: 'src/index.js',
     output: {
-        file: 'dist/index.js',
+        file: 'dist/pcui-graph.js',
         format: 'umd',
         name: 'pcuiGraph',
         globals: {
@@ -36,10 +36,10 @@ const umdBuild = {
     ]
 };
 
-const moduleBuild = {
+const module = {
     input: 'src/index.js',
     output: {
-        file: 'dist/index.mjs',
+        file: 'dist/pcui-graph.mjs',
         format: 'module'
     },
     external: ['@playcanvas/observer', '@playcanvas/pcui'],
@@ -57,34 +57,13 @@ const moduleBuild = {
     ]
 };
 
-const bundleBuild = {
-    input: 'src/index.js',
-    output: {
-        file: 'dist/bundle.mjs',
-        format: 'module'
-    },
-    plugins: [
-        commonjs({ transformMixedEsModules: true }),
-        globals(),
-        builtins(),
-        babel({ babelHelpers: 'bundled' }),
-        postcss({
-            minimize: false,
-            extensions: ['.css', '.scss']
-        }),
-        resolve(),
-        process.env.NODE_ENV === 'production' && uglify()
-    ]
-};
-
 
 let targets;
 if (process.env.target) {
     switch (process.env.target.toLowerCase()) {
-        case "umd":      targets = [umdBuild]; break;
-        case "module":      targets = [moduleBuild]; break;
-        case "bundle":      targets = [bundleBuild]; break;
-        case "all":      targets = [umdBuild, moduleBuild, bundleBuild]; break;
+        case "umd":      targets = [umd]; break;
+        case "module":      targets = [module]; break;
+        case "all":      targets = [umd, module]; break;
     }
 }
 

src/graph-view-edge.js

@@ -1,4 +1,5 @@
 import * as joint from 'jointjs/dist/joint.min';
+import { ContextMenu } from '@playcanvas/pcui';
 
 joint.connectors.smoothInOut = function (sourcePoint, targetPoint, vertices, args) {
     var p1 = sourcePoint.clone();
@@ -108,7 +109,7 @@ class GraphViewEdge {
         if (!edgeCell) return;
         var contextMenu = document.createElement('div');
         this._paper.el.appendChild(contextMenu);
-        new this._graphView.pcui.ContextMenu({
+        new ContextMenu({
             triggerElement: edgeCell.el,
             dom: contextMenu,
             items: items

src/graph-view-node.js

@@ -1,4 +1,5 @@
 import * as joint from 'jointjs/dist/joint.min';
+import { ContextMenu, Container, Label, TextInput, BooleanInput, NumericInput, VectorInput } from '@playcanvas/pcui';
 
 const Colors = {
     bcgDarkest: '#20292b',
@@ -265,8 +266,8 @@ class GraphViewNode {
         var containers = [];
         if (visibleAttributes) {
             visibleAttributes.forEach((attribute, i) => {
-                const container = new this._graphView.pcui.Container({ class: 'graph-node-container' });
-                const label = new this._graphView.pcui.Label({ text: attribute.name, class: 'graph-node-label' });
+                const container = new Container({ class: 'graph-node-container' });
+                const label = new Label({ text: attribute.name, class: 'graph-node-label' });
                 let input;
                 let nodeValue;
                 if (nodeData.attributes) {
@@ -286,16 +287,16 @@ class GraphViewNode {
                 }
                 switch (attribute.type) {
                     case 'TEXT_INPUT':
-                        input = new this._graphView.pcui.TextInput({ class: 'graph-node-input', value: nodeValue });
+                        input = new TextInput({ class: 'graph-node-input', value: nodeValue });
                         break;
                     case 'BOOLEAN_INPUT':
-                        input = new this._graphView.pcui.BooleanInput({ class: 'graph-node-input', value: nodeValue });
+                        input = new BooleanInput({ class: 'graph-node-input', value: nodeValue });
                         break;
                     case 'NUMERIC_INPUT':
-                        input = new this._graphView.pcui.NumericInput({ class: 'graph-node-input', hideSlider: true, value: nodeValue && nodeValue.x ? nodeValue.x : nodeValue });
+                        input = new NumericInput({ class: 'graph-node-input', hideSlider: true, value: nodeValue && nodeValue.x ? nodeValue.x : nodeValue });
                         break;
                     case 'VEC_2_INPUT':
-                        input = new this._graphView.pcui.VectorInput({ dimensions: 2,
+                        input = new VectorInput({ dimensions: 2,
                             class: 'graph-node-input',
                             hideSlider: true,
                             value: [
@@ -306,7 +307,7 @@ class GraphViewNode {
                         input.inputs.forEach((i) => i._sliderControl.dom.remove());
                         break;
                     case 'VEC_3_INPUT':
-                        input = new this._graphView.pcui.VectorInput({ dimensions: 3,
+                        input = new VectorInput({ dimensions: 3,
                             class: 'graph-node-input',
                             hideSlider: true,
                             value: [
@@ -318,7 +319,7 @@ class GraphViewNode {
                         input.inputs.forEach((i) => i._sliderControl.dom.remove());
                         break;
                     case 'VEC_4_INPUT':
-                        input = new this._graphView.pcui.VectorInput({ dimensions: 4,
+                        input = new VectorInput({ dimensions: 4,
                             class: 'graph-node-input',
                             hideSlider: true,
                             value: [
@@ -375,7 +376,7 @@ class GraphViewNode {
         var contextMenu = document.createElement('div');
         this._paper.el.appendChild(contextMenu);
         this._contextMenuElement = contextMenu;
-        this._contextMenu = new this._graphView.pcui.ContextMenu({
+        this._contextMenu = new ContextMenu({
             triggerElement: nodeView.el,
             dom: contextMenu,
             items: this._graphView._parent._initialiseNodeContextMenuItems(this.nodeData, items)

src/graph-view.js

@@ -6,6 +6,7 @@ import { jointShapeElement, jointShapeElementView } from './joint-shape-node.js'
 import { GRAPH_ACTIONS } from './constants.js';
 // TODO replace with a lighter math library
 import { Vec2 } from 'playcanvas/src/math/vec2.js';
+import { ContextMenu } from '@playcanvas/pcui';
 
 class GraphView extends JointGraph {
     constructor(parent, dom, graphSchema, graphData, config) {
@@ -15,7 +16,6 @@ class GraphView extends JointGraph {
         this._dom = dom;
         this._graphSchema = graphSchema;
         this._graphData = graphData;
-        this.pcui = parent.pcui;
 
         this._config = config;
 
@@ -165,7 +165,7 @@ class GraphView extends JointGraph {
     addCanvasContextMenu(items) {
         this._viewContextMenu = document.createElement('div');
         this._paper.el.appendChild(this._viewContextMenu);
-        var contextMenu = new this.pcui.ContextMenu({
+        var contextMenu = new ContextMenu({
             dom: this._viewContextMenu,
             items: items
         });

src/index.js

@@ -2,7 +2,7 @@ import { deepCopyFunction } from './util';
 import GraphView from './graph-view';
 import './style.scss';
 import { GRAPH_ACTIONS, DEFAULT_CONFIG } from './constants.js';
-import Element from '@playcanvas/pcui/Element';
+import { Element } from '@playcanvas/pcui';
 import { Observer } from '@playcanvas/observer';
 import SelectedItem from './selected-item';
 
@@ -14,18 +14,18 @@ class Graph extends Element {
      * Creates a new Graph.
      *
      * @param {object} schema - The graph schema.
-     * @param {object} options - The graph configuration. Optional.
-     * @param {object} options.initialData - The graph data to initialize the graph with.
-     * @param {HTMLElement} options.dom - If supplied, the graph will be attached to this element.
-     * @param {object[]} options.contextMenuItems - The context menu items to add to the graph. Optional.
-     * @param {boolean} options.readOnly - Whether the graph is read only. Optional. Defaults to false.
-     * @param {boolean} options.passiveUIEvents - If true, the graph will not update its data and view upon user interaction. Instead, these interactions can be handled explicitly by listening to fired events. Optional. Defaults to false.
-     * @param {boolean} options.incrementNodeNames - Whether the graph should increment the node name when a node with the same name already exists. Optional. Defaults to false.
-     * @param {boolean} options.restrictTranslate - Whether the graph should restrict the translate graph operation to the graph area. Optional. Defaults to false.
-     * @param {boolean} options.edgeHoverEffect - Whether the graph should show an edge highlight effect when the mouse is hovering over edges. Optional. Defaults to true.
-     * @param {boolean} options.includeFonts - If true the graph will include a default font style. Defaults to true.
-     * @param {object} options.defaultStyles - Used to override the graph's default styling. Check ./constants.js for a full list of style properties.
-     * @param {object} options.adjustVertices - If true, multiple edges conntected between two nodes will be spaced apart.
+     * @param {object} [options] - The graph configuration. Optional.
+     * @param {object} [options.initialData] - The graph data to initialize the graph with.
+     * @param {HTMLElement} [options.dom] - If supplied, the graph will be attached to this element.
+     * @param {object[]} [options.contextMenuItems] - The context menu items to add to the graph. Optional.
+     * @param {boolean} [options.readOnly] - Whether the graph is read only. Optional. Defaults to false.
+     * @param {boolean} [options.passiveUIEvents] - If true, the graph will not update its data and view upon user interaction. Instead, these interactions can be handled explicitly by listening to fired events. Optional. Defaults to false.
+     * @param {boolean} [options.incrementNodeNames] - Whether the graph should increment the node name when a node with the same name already exists. Optional. Defaults to false.
+     * @param {boolean} [options.restrictTranslate] - Whether the graph should restrict the translate graph operation to the graph area. Optional. Defaults to false.
+     * @param {boolean} [options.edgeHoverEffect] - Whether the graph should show an edge highlight effect when the mouse is hovering over edges. Optional. Defaults to true.
+     * @param {boolean} [options.includeFonts] - If true the graph will include a default font style. Defaults to true.
+     * @param {object} [options.defaultStyles] - Used to override the graph's default styling. Check ./constants.js for a full list of style properties.
+     * @param {object} [options.adjustVertices] - If true, multiple edges conntected between two nodes will be spaced apart.
      */
     constructor(schema, options = {}) {
         super(options.dom ? options.dom : document.createElement('div'), {});
@@ -43,7 +43,6 @@ class Graph extends Element {
             restrictTranslate: options.restrictTranslate,
             edgeHoverEffect: options.edgeHoverEffect,
             includeFonts: options.includeFonts,
-            useGlobalPCUI: options.useGlobalPCUI,
             adjustVertices: options.adjustVertices
         };
         if (options.defaultStyles) {
@@ -74,23 +73,6 @@ class Graph extends Element {
             //#endif
         }
 
-        if (!this._config.useGlobalPCUI) {
-            /*#if _STRIP_SCSS
-            //#else */
-            this.pcui = {
-                ContextMenu: require('@playcanvas/pcui/ContextMenu').default,
-                Container: require('@playcanvas/pcui/Container').default,
-                Label: require('@playcanvas/pcui/Label').default,
-                TextInput: require('@playcanvas/pcui/TextInput').default,
-                BooleanInput: require('@playcanvas/pcui/BooleanInput').default,
-                NumericInput: require('@playcanvas/pcui/NumericInput').default,
-                VectorInput: require('@playcanvas/pcui/VectorInput').default
-            };
-            //#endif
-        } else {
-            this.pcui = window.pcui;
-        }
-
         this._buildGraphFromData();
         if (options.defaultStyles.initialScale) {
             this.setGraphScale(options.defaultStyles.initialScale);

tsd.js

@@ -0,0 +1,26 @@
+const fs = require('fs');
+
+const path = './dist/pcui-graph.d.ts';
+
+var lastClass = '';
+function removeDuplicateClasses(str) {
+    return str.replace(/(\/\*[\s\S]*?\*\/[\r\n]?)?declare class ([a-zA-Z]+).*\{[\s\S]*?\}/g, function (all, jsdoc, classname) {
+        if (all == lastClass) {
+            return `// drop duplicate: ${classname}`;
+        }
+        lastClass = all;
+        return all;
+    });
+}
+
+// replace declare with export and add 'export as namespace pc' in the end
+let ts = fs.readFileSync(path, 'utf8');
+ts = removeDuplicateClasses(ts);
+ts = ts.replace(/^declare /gm, 'export ');
+// Remove empty interfaces
+ts = ts.replace(/export interface ([a-zA-Z]+).*\{\n\}/g, function (all, interfacename) {
+    return `// drop empty interface: ${interfacename}`
+});
+// export namespace
+ts += 'export as namespace pcuiGraph;\n';
+fs.writeFileSync(path, ts);