Build update (#42)

* build update

Author: ellthompson

.gitignore

@@ -11,6 +11,7 @@
 # production
 /build
 /dist
+/styles/dist
 /.storybook/utils/jsdoc-ast.json
 
 # misc

.storybook/base-component.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Graph } from '../src/index.js';
+import Graph from '../src/index.js';
+import '../src/styles/index.js';
 
 class BaseComponent extends React.Component {
     constructor(props) {

README.md

@@ -6,16 +6,16 @@ Create node based visual graphs in the browser. Supports undirected / directed g
 
 ## Getting Started
 
-To build the graph library, run the following in the root directory.
+First install PCUI Graph into your npm project:
 
 ```
-npm install
-npm run build
+npm install @playcanvas/pcui-graph
 ```
 
-You can then use the library in your own project by including the `dist/index.mjs` file. The graph can then be instantiated as follows:
+You can then use the library in your own project by importing the PCUI Graph build and its styling file into your project. The graph can then be instantiated as follows:
 ```javascript
-import { Graph } from 'dist/index.mjs';
+import Graph from '@playcanvas/pcui-graph';
+import '@playcanvas/pcui-graph/styles';
 
 const schema = {
     nodes: {

docs/events.md

@@ -5,7 +5,7 @@
 After creating a graph, you can register a callback for various events. This is achieved using the graphs [on function](./Graph.md#on). The following events are supported:
 
 ```javascript
-import { Graph, GRAPH_ACTIONS } from 'dist/pcuiGraph';
+import Graph from '@playcanvas/pcui-graph';
 
 const schema = { ... };
 const graph = new Graph(schema);
@@ -14,75 +14,75 @@ const graph = new Graph(schema);
  * @event
  * @param {object} args.node - The node that was added
  */
-graph.on(GRAPH_ACTIONS.ADD_NODE, ({ node }) => { ... });
+graph.on(Graph.GRAPH_ACTIONS.ADD_NODE, ({ node }) => { ... });
 
 /*
  * @event
  * @param {object} args.node - The node that was deleted
  * @param {object} args.edgeData - The edges contained in the graph
  * @param {object} args.edges - The edges that were removed when deleting this node
  */
-graph.on(GRAPH_ACTIONS.DELETE_NODE, ({ node, edgeData, edges }) => { ... });
+graph.on(Graph.GRAPH_ACTIONS.DELETE_NODE, ({ node, edgeData, edges }) => { ... });
 
 /*
  * @event
  * @param {object} args.node - The node that was selected
  * @param {object} args.prevItem - The previously selected item, either a node or an edge
  */
-graph.on(GRAPH_ACTIONS.SELECT_NODE, ({ node, prevItem }) => { ... });
+graph.on(Graph.GRAPH_ACTIONS.SELECT_NODE, ({ node, prevItem }) => { ... });
 
 /*
  * @event
  * @param {object} args.node - The node that was updated
  * @param {object} args.nodeId - The node id of the node that was updated
  */
-graph.on(GRAPH_ACTIONS.UPDATE_NODE_POSITION, ({ node, nodeId }) => { ... });
+graph.on(Graph.GRAPH_ACTIONS.UPDATE_NODE_POSITION, ({ node, nodeId }) => { ... });
 
 /*
  * @event
  * @param {object} args.node - The node that was updated
  * @param {object} args.attribute - The name of the attribute that was updated
  * @param {object} args.attributeKey - The key of the attribute that was updated
  */
-graph.on(GRAPH_ACTIONS.UPDATE_NODE_ATTRIBUTE, ({ node, attribute, attributeKey }) => { ... });
+graph.on(Graph.GRAPH_ACTIONS.UPDATE_NODE_ATTRIBUTE, ({ node, attribute, attributeKey }) => { ... });
 
 /*
  * @event
  * @param {object} args.edge - The edge that was updated
  * @param {object} args.edgeId - The id of the edge that was updated
  */
-graph.on(GRAPH_ACTIONS.ADD_EDGE, ({ edge, edgeId }) => { ... });
+graph.on(Graph.GRAPH_ACTIONS.ADD_EDGE, ({ edge, edgeId }) => { ... });
 
 /*
  * @event
  * @param {object} args.edge - The edge that was updated
  * @param {object} args.edgeId - The id of the edge that was updated
  */
-graph.on(GRAPH_ACTIONS.DELETE_EDGE, ({ edge, edgeId }) => { ... });
+graph.on(Graph.GRAPH_ACTIONS.DELETE_EDGE, ({ edge, edgeId }) => { ... });
 
 /*
  * @event
  * @param {object} args.edge - The edge that was selected
  * @param {object} args.prevItem - The previously selected item, either a node or an edge
  */
-graph.on(GRAPH_ACTIONS.SELECT_EDGE, ({ edge, prevItem }) => { ... });
+graph.on(Graph.GRAPH_ACTIONS.SELECT_EDGE, ({ edge, prevItem }) => { ... });
 
 /*
  * @event
  * @param {object} args.prevItem - The previously selected item, either a node or an edge
  */
-graph.on(GRAPH_ACTIONS.DESELECT_ITEM, ({ prevItem }) => { ... });
+graph.on(Graph.GRAPH_ACTIONS.DESELECT_ITEM, ({ prevItem }) => { ... });
 
 /*
  * @event
  * @param {number} args.pos.x - The x position of the viewport in relation to the graph
  * @param {number} args.pos.y - The y position of the viewport in relation to the graph
  */
-graph.on(GRAPH_ACTIONS.UPDATE_TRANSLATE, ({ pos }) => { ... });
+graph.on(Graph.GRAPH_ACTIONS.UPDATE_TRANSLATE, ({ pos }) => { ... });
 
 /*
  * @event
  * param {number} args.scale - The current scale of the graph
  */
-graph.on(GRAPH_ACTIONS.UPDATE_SCALE, ({ scale }) => { ... });
+graph.on(Graph.GRAPH_ACTIONS.UPDATE_SCALE, ({ scale }) => { ... });
 ```

package.json

@@ -17,7 +17,7 @@
   },
   "scripts": {
     "build": "cross-env NODE_ENV=production rollup -c --environment target:all && npm run bundle:styles",
-    "bundle:styles": "scss-bundle -e ./src/style.scss -o ./dist/pcui-graph.scss",
+    "bundle:styles": "scss-bundle -e ./src/styles/style.scss -o ./dist/pcui-graph.scss",
     "watch": "rollup -c --environment target:all --watch",
     "watch:umd": "rollup -c --environment target:umd --watch",
     "watch:module": "rollup -c --environment target:module --watch",
@@ -33,7 +33,8 @@
     "dist/pcui-graph.scss",
     "package.json",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "styles"
   ],
   "browserslist": {
     "production": [

rollup.config.js

@@ -74,12 +74,29 @@ const module = {
 };
 
 
+const styles = {
+    input: 'src/styles/index.js',
+    output: {
+        file: 'styles/dist/index.mjs',
+        format: 'esm'
+    },
+    plugins: [
+        resolve(),
+        postcss({
+            minimize: false,
+            extensions: ['.css', '.scss']
+        })
+    ]
+};
+
+
 let targets;
 if (process.env.target) {
     switch (process.env.target.toLowerCase()) {
         case "umd":      targets = [umd]; break;
         case "module":      targets = [module]; break;
-        case "all":      targets = [umd, module]; break;
+        case "styles":      targets = [styles]; break;
+        case "all":      targets = [umd, module, styles]; break;
     }
 }
 

src/index.js

@@ -1,9 +1,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';
-import '@playcanvas/pcui/styles';
 import { Observer } from '@playcanvas/observer';
 import SelectedItem from './selected-item';
 
@@ -658,4 +656,4 @@ class Graph extends Element {
 
 Graph.GRAPH_ACTIONS = GRAPH_ACTIONS;
 
-export { Graph };
+export default Graph;

src/joint-graph.js

@@ -1,6 +1,3 @@
-import './lib/joint.scss';
-import './lib/layout.scss';
-import './lib/material.scss';
 import 'jquery';
 import _ from 'lodash';
 import 'backbone';

src/joint-shape-node.js

@@ -1,6 +1,3 @@
-import 'jointjs/dist/joint.css';
-import 'jointjs/css/layout.css';
-import 'jointjs/css/themes/material.css';
 import 'jquery';
 import 'backbone';
 import _ from 'lodash';

src/styles/index.js

@@ -0,0 +1 @@
+import './style.scss';