Make one package.json for Kitchensink example (#176)

one package.json per examples with its one webpack config
frintjs · May 2, 2017 · a87fd6e · a87fd6e
1 parent c4dd810
commit a87fd6e
Show file tree

Hide file tree

Showing 36 changed files with 424 additions and 266 deletions.
diff --git a/examples/config.js b/examples/config.js
diff --git a/examples/counter/.babelrc b/examples/counter/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "travix"
+  ]
+}
diff --git a/examples/counter/Makefile b/examples/counter/Makefile
@@ -1,8 +1,12 @@
 PORT=5001
 
+bundle-vendor:
+	(cd vendors && ../node_modules/.bin/webpack)
+
 bundle:
-	(cd ./core && npm run build)
+	npm run build
 
 serve:
+	make bundle-vendor
 	make bundle
-	(cd ./build && ../../../node_modules/.bin/http-server -p $(PORT))
+	(cd ./build && ../node_modules/.bin/http-server -p $(PORT))
diff --git a/examples/counter/README.md b/examples/counter/README.md
@@ -10,5 +10,6 @@ Example demonstrating:
 Run:
 
 ```
+$ npm install
 $ make serve
 ```
diff --git a/examples/counter/build/index.html b/examples/counter/build/index.html
@@ -9,12 +9,9 @@
   <body>
     <div id="root"></div>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.2/Rx.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.3/lodash.min.js"></script>
 
-    <script src="https://unpkg.com/frint@0.x/dist/frint.min.js"></script>
+    <script src="./js/vendor.js"></script>
 
     <script src="./js/core.js"></script>
   </body>

diff --git a/examples/counter/core/package.json b/examples/counter/core/package.json
diff --git a/examples/counter/core/webpack.config.js b/examples/counter/core/webpack.config.js
diff --git a/examples/counter/package.json b/examples/counter/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "frint-example-counter",
+  "version": "0.0.1",
+  "description": "Counter example in frint",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack"
+  },
+  "author": "Travix International B.V.",
+  "license": "MIT",
+  "dependencies": {
+    "frint": "^1.3.0",
+    "frint-react": "^1.3.0",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "http-server": "^0.9.0",
+    "rxjs": "^5.2.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.10.1",
+    "babel-core": "^6.13.2",
+    "babel-eslint": "^7.1.0",
+    "babel-loader": "^6.2.9",
+    "babel-preset-travix": "^1.1.0",
+    "babel-register": "^6.9.0",
+    "webpack": "^2.2.0"
+  }
+}
diff --git a/examples/counter/vendors/vendor.js b/examples/counter/vendors/vendor.js
@@ -0,0 +1,49 @@
+// react-dom
+(function () {
+  var m = require('react-dom');
+  if (typeof m.default !== 'undefined') {
+    window['ReactDOM'] = m.default;
+    return;
+  }
+  window['ReactDOM'] = m;
+})();
+
+// react
+(function () {
+  var m = require('react');
+  if (typeof m.default !== 'undefined') {
+    window['React'] = m.default;
+    return;
+  }
+  window['React'] = m;
+})();
+
+// rxjs
+(function () {
+  var m = require('rxjs');
+  if (typeof m.default !== 'undefined') {
+    window['Rx'] = m.default;
+    return;
+  }
+  window['Rx'] = m;
+})();
+
+// frint
+(function () {
+  var m = require('frint');
+  if (typeof m.default !== 'undefined') {
+    window['Frint'] = m.default;
+    return;
+  }
+  window['Frint'] = m;
+})();
+
+// frint-react
+(function () {
+  var m = require('frint-react');
+  if (typeof m.default !== 'undefined') {
+    window['FrintReact'] = m.default;
+    return;
+  }
+  window['FrintReact'] = m;
+})();
diff --git a/examples/counter/vendors/webpack.config.js b/examples/counter/vendors/webpack.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  entry: {
+    vendor: __dirname + '/vendor.js'
+  },
+  devtool: 'source-map',
+  output: {
+    path: __dirname + '/../build/js',
+    filename: '[name].js'
+  }
+};
diff --git a/examples/counter/webpack.config.js b/examples/counter/webpack.config.js
@@ -0,0 +1,30 @@
+module.exports = {
+  entry: {
+    core: __dirname + '/core/index.js'
+  },
+  devtool: 'source-map',
+  output: {
+    path: __dirname + '/build/js',
+    filename: '[name].js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js)$/,
+        loader: 'babel-loader',
+        query: {
+          presets: [
+            'travix'
+          ]
+        }
+      }
+    ]
+  },
+  externals: {
+    'frint': 'Frint',
+    'frint-react': 'FrintReact',
+    'react': 'React',
+    'react-dom': 'ReactDOM',
+    'rxjs': 'Rx'
+  }
+};
diff --git a/examples/kitchensink/.babelrc b/examples/kitchensink/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "travix"
+  ]
+}
diff --git a/examples/kitchensink/Makefile b/examples/kitchensink/Makefile
@@ -1,29 +1,15 @@
 PORT=5002
 
-bundle:
-	make bundle-frint
-	make bundle-example
-
-bundle-example:
-	(cd ./core && npm run build)
-	(cd ./app-counter && npm run build)
-	(cd ./app-color && npm run build)
-	(cd ./app-todos && npm run build)
-	(cd ./app-reversed && npm run build)
+bundle-vendor:
+	(cd vendors && ../node_modules/.bin/webpack)
 
-bundle-frint:
-	(cd ../../ && npm run dist)
-	make copy-frint
-
-copy-frint:
-	(cp ../../packages/frint/dist/frint.js ./build/js/frint.js)
-	(cp ../../packages/frint-model/dist/frint-model.js ./build/js/frint-model.js)
-	(cp ../../packages/frint-store/dist/frint-store.js ./build/js/frint-store.js)
-	(cp ../../packages/frint-react/dist/frint-react.js ./build/js/frint-react.js)
+bundle:
+	npm run build
 
 serve-only:
-	(cd ./build && ../../../node_modules/.bin/http-server -p $(PORT))
+	(cd ./build && ../node_modules/.bin/http-server -p $(PORT))
 
 serve:
+	make bundle-vendor
 	make bundle
 	make serve-only
diff --git a/examples/kitchensink/README.md b/examples/kitchensink/README.md
@@ -7,5 +7,6 @@ Lots of examples in one demo.
 Run:
 
 ```
+$ npm install
 $ make serve
 ```
diff --git a/examples/kitchensink/app-color/package.json b/examples/kitchensink/app-color/package.json
diff --git a/examples/kitchensink/app-color/webpack.config.js b/examples/kitchensink/app-color/webpack.config.js
diff --git a/examples/kitchensink/app-counter/webpack.config.js b/examples/kitchensink/app-counter/webpack.config.js
diff --git a/examples/kitchensink/app-reversed/package.json b/examples/kitchensink/app-reversed/package.json
diff --git a/examples/kitchensink/app-reversed/webpack.config.js b/examples/kitchensink/app-reversed/webpack.config.js
diff --git a/examples/kitchensink/app-todos/package.json b/examples/kitchensink/app-todos/package.json