Allow multiple components to use the same HTML

Also updated version and documentation according to this change.
julkue · Sep 23, 2017 · 92ab901 · 92ab901
1 parent 8b4d143
commit 92ab901
Show file tree

Hide file tree

Showing 24 changed files with 74 additions and 42 deletions.
diff --git a/build/fractal.js b/build/fractal.js
@@ -2,7 +2,9 @@ const path = require('path'),
   fractal = require('@frctl/fractal').create(),
   mandelbrot = require('@frctl/mandelbrot'),
   hbs = require('@frctl/handlebars'),
-  pkg = require(path.join(__dirname, '../package.json'));
+  pkg = require(path.join(__dirname, '../package.json')),
+  slash = require('slash'),
+  glob = require('glob');
 
 const title = `${pkg.name.split('/').pop().replace('-', ' ').replace(
   /\b\w/g, l => l.toUpperCase())
@@ -19,6 +21,20 @@ fractal.web.theme(mandelbrot({
 }));
 fractal.components.engine(hbs({
   helpers: {
+    eachComponentFile: function(extension, target, options) {
+      const fullPath = slash(target.component.viewPath),
+        component = fullPath.split('/').reverse()[1],
+        distDir = slash(path.join(__dirname, '../dist/')),
+        dir = slash(path.join(distDir, component)),
+        files = glob.sync(`${dir}/**/*.${extension}`);
+      let buffer = '';
+      files.map(file => {
+        file = file.replace(distDir, '/');
+        buffer += options.fn(file);
+        return file;
+      });
+      return buffer;
+    },
     splitDashLast: function(str) {
       const arr = str.split('-');
       return arr[arr.length - 1];

diff --git a/build/webpack.config.js b/build/webpack.config.js
@@ -9,7 +9,7 @@ const path = require('path'),
 let components = {
   development: path.join(__dirname, '../src/components/_common/development.js')
 };
-glob.sync(path.join(__dirname, '../src/components/*/**/*.js'), {
+glob.sync(path.join(__dirname, '../src/components/*/**/*-bundle.js'), {
   ignore: path.join(__dirname, '../src/components/_common/**/*')
 }).forEach(file => {
   let folder = file.split('/');

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@julmot/form-components",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Custom Form Components. Without Any Framework.",
   "keywords": [
     "form",
@@ -49,6 +49,7 @@
     "postcss-loader": "^2.0.6",
     "resolve-url-loader": "^2.1.0",
     "sass-loader": "^6.0.6",
+    "slash": "^1.0.0",
     "style-loader": "^0.18.2",
     "url-loader": "^0.5.9",
     "webpack": "^3.5.6"

diff --git a/src/components/_bright.hbs b/src/components/_bright.hbs
@@ -16,8 +16,11 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta http-equiv="cleartype" content="on">
 
-  <!-- Bundled styles for development -->
+  <!-- Development styles -->
   <link rel="stylesheet" type="text/css" href="{{path "/development/development.css"}}">
+  {{#eachComponentFile 'css' _target}}
+    <link rel="stylesheet" type="text/css" href="{{path this}}">
+  {{/eachComponentFile}}
 
 </head>
 <body>

diff --git a/src/components/_common/development.js b/src/components/_common/development.js
@@ -1,7 +1,12 @@
 import 'normalize.css/normalize.css';
 import './development.scss';
 import 'babel-polyfill';
-const components = require.context('../', true, /^(.*\.(js$))[^.]*$/igm);
+// all non bundle JS files in subdirectories excluding the current file
+const components = require.context(
+  '../',
+  true,
+  /^\.\/[a-z-]+\/(?!development\.js$)[a-z-]+\/(?!.*-bundle\.js)[a-z-]+\.js/gm
+);
 
 class Bootstrap {
   constructor() {
@@ -18,7 +23,8 @@ class Bootstrap {
       document.addEventListener('DOMContentLoaded', () => this.initOnce());
     }
 
-    // Add class to only add transitions if the page is loaded
+    // Add class to only add transitions if the page is loaded (for development
+    // purposes only)
     window.addEventListener('load', () => {
       document.body.classList.add('transition-ready');
     });
@@ -31,20 +37,10 @@ class Bootstrap {
 
   initComponents(context) {
     console.debug('Initializing components in context: ', context);
-
-    // Initialize all components (one class instance per component
-    // occurrence). Don't initialize the same occurrence multiple times
+    // Initialize all components (one class instance per component occurrence).
+    // Don't initialize the same occurrence multiple times
     components.keys().forEach(key => {
-      // Exclude the current file
-      if (key.includes('development.js')) {
-        return;
-      }
       const component = components(key);
-      // Catch cases where it's a class only for extending purposes, therefore
-      // no selector is available
-      if (!component.selector) {
-        return;
-      }
       // Iterate over all contexts, in case an array was provided
       [].concat(context).forEach(context => {
         // if the context itself matches the component selector
@@ -60,7 +56,7 @@ class Bootstrap {
 
             // continue initializing other components if one component fails
             try {
-              new component['default'](context);
+              new component[Object.keys(component)[0]](context);
             } catch (e) {
               console.error(e.message, e.stack);
             }

diff --git a/src/components/_dark.hbs b/src/components/_dark.hbs
@@ -16,8 +16,11 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta http-equiv="cleartype" content="on">
 
-  <!-- Bundled styles for development -->
+  <!-- Development styles -->
   <link rel="stylesheet" type="text/css" href="{{path "/development/development.css"}}">
+  {{#eachComponentFile 'css' _target}}
+    <link rel="stylesheet" type="text/css" href="{{path this}}">
+  {{/eachComponentFile}}
 
 </head>
 <body style="background-color: #000;">

diff --git a/src/components/checkbox/checkbox-material-like/checkbox-material-like-bundle.js b/src/components/checkbox/checkbox-material-like/checkbox-material-like-bundle.js
@@ -0,0 +1,2 @@
+import './checkbox-material-like.scss';
+export * from './checkbox-material-like';
diff --git a/src/components/checkbox/checkbox-material-like/checkbox-material-like.js b/src/components/checkbox/checkbox-material-like/checkbox-material-like.js
@@ -1,7 +1,6 @@
-import './checkbox-material-like.scss';
 import FormComponent from '../../form-component';
 
-export default class Checkbox extends FormComponent {
+export class Checkbox extends FormComponent {
   constructor(context) {
     super(
       context,

diff --git a/src/components/example-form/example-form-material-like/example-form-material-like-bundle.js b/src/components/example-form/example-form-material-like/example-form-material-like-bundle.js
@@ -0,0 +1,6 @@
+import './example-form-material-like.scss';
+import '../../checkbox/checkbox-material-like/checkbox-material-like-bundle';
+import '../../message/message-material-like/message-material-like-bundle';
+import '../../radio/radio-material-like/radio-material-like-bundle';
+import '../../select/select-material-like/select-material-like-bundle';
+import '../../text-field/text-field-material-like/text-field-material-like-bundle';
diff --git a/...ents/example-form/example-form.config.yml → ...ike/example-form-material-like.config.yml b/...ents/example-form/example-form.config.yml → ...ike/example-form-material-like.config.yml
@@ -1,5 +1,6 @@
 status: "ready"
 default: "material-like"
+notes: "The only reason for this component is to demonstrate all form components in one place and for development purposes. It won't be shipped in releases"
 variants:
   - name: "material-like"
     context:

diff --git a/src/components/example-form/example-form.hbs → ...erial-like/example-form-material-like.hbs b/src/components/example-form/example-form.hbs → ...erial-like/example-form-material-like.hbs
diff --git a/...components/example-form/example-form.scss → ...rial-like/example-form-material-like.scss b/...components/example-form/example-form.scss → ...rial-like/example-form-material-like.scss
diff --git a/src/components/example-form/example-form.js b/src/components/example-form/example-form.js
diff --git a/src/components/form-component.js b/src/components/form-component.js
@@ -2,7 +2,6 @@ export default class FormComponent {
   constructor(context, field) {
     this.context = context;
     this.field = field;
-    console.debug('Form component initialized');
   }
 
   init() {

diff --git a/src/components/message/message-material-like/message-material-like-bundle.js b/src/components/message/message-material-like/message-material-like-bundle.js
@@ -0,0 +1,2 @@
+import './message-material-like.scss';
+export * from './message-material-like';
diff --git a/src/components/message/message-material-like/message-material-like.js b/src/components/message/message-material-like/message-material-like.js
@@ -1,6 +1,4 @@
-import './message-material-like.scss';
-
-export default class Message {
+export class Message {
   constructor(context) {
     this.message = context;
     this.init();

diff --git a/src/components/radio/radio-material-like/radio-material-like-bundle.js b/src/components/radio/radio-material-like/radio-material-like-bundle.js
@@ -0,0 +1,2 @@
+import './radio-material-like.scss';
+export * from './radio-material-like';
diff --git a/src/components/radio/radio-material-like/radio-material-like.js b/src/components/radio/radio-material-like/radio-material-like.js
@@ -1,7 +1,6 @@
-import './radio-material-like.scss';
 import FormComponent from '../../form-component';
 
-export default class Radio extends FormComponent {
+export class Radio extends FormComponent {
   constructor(context) {
     super(
       context,

diff --git a/src/components/select/select-material-like/select-material-like-bundle.js b/src/components/select/select-material-like/select-material-like-bundle.js
@@ -0,0 +1,2 @@
+import './select-material-like.scss';
+export * from './select-material-like';
diff --git a/src/components/select/select-material-like/select-material-like.js b/src/components/select/select-material-like/select-material-like.js
@@ -1,8 +1,7 @@
-import './select-material-like.scss';
 import FormComponent from '../../form-component';
 import Bowser from 'bowser';
 
-export default class Select extends FormComponent {
+export class Select extends FormComponent {
   constructor(context) {
     super(
       context,

diff --git a/src/components/text-field/text-field-material-like/text-field-material-like-bundle.js b/src/components/text-field/text-field-material-like/text-field-material-like-bundle.js
@@ -0,0 +1,2 @@
+import './text-field-material-like.scss';
+export * from './text-field-material-like';
diff --git a/src/components/text-field/text-field-material-like/text-field-material-like.js b/src/components/text-field/text-field-material-like/text-field-material-like.js
@@ -1,7 +1,6 @@
-import './text-field-material-like.scss';
 import FormComponent from '../../form-component';
 
-export default class TextField extends FormComponent {
+export class TextField extends FormComponent {
   constructor(context) {
     super(
       context,

diff --git a/src/docs/index.md b/src/docs/index.md
@@ -16,24 +16,28 @@ You can embed individual form components from the `dist` folder. They are availa
 
 ## Getting Started
 
-After you've embedded the components you want to use (including their CSS files), you need to initialize them. Create a new class instance of the exported `default` class. In case you'd like to dynamically initialize instances, you can use the also exported `selector` string to determine if a component exists.
+After you've embedded the components you want to use (including their CSS files), you need to initialize them. Create a new class instance of the exported class. In case you'd like to dynamically initialize instances, you can use the also exported `selector` string to determine if a component exists.
 
 For example when using Webpack with ES6:
 
 ```js
-import '@julmot/form-components/dist/message/message.css';
-import * as Message from '@julmot/form-components/dist/message/message';
+import '@julmot/form-components/dist/message-material-like/message-material-like.css';
+import {
+  Message,
+  selector as MessageSelector
+} from '@julmot/form-components/dist/message-material-like/message-material-like';
 
-new Message.default(document.querySelector(Message.selector));
+new Message(document.querySelector(MessageSelector));
 ```
 
 ## Currently Available Components
 
-- Select
-- Text Field (single and multi line)
-- Checkbox
-- Radio
-- Message (e.g. to output validation messages at the top of a document)
+- Theme: Material Like:
+  - Select
+  - Text Field (single and multi line)
+  - Checkbox
+  - Radio
+  - Message (e.g. to output validation messages at the top of a document)
 
 There's also an example form that renders all of them in a single form for demonstration purposes.
 

diff --git a/src/fonts/form-components-icons/form-components-icons.woff b/src/fonts/form-components-icons/form-components-icons.woff
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import './checkbox-material-like.scss';
		export * from './checkbox-material-like';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import './message-material-like.scss';
		export * from './message-material-like';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import './radio-material-like.scss';
		export * from './radio-material-like';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import './select-material-like.scss';
		export * from './select-material-like';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import './text-field-material-like.scss';
		export * from './text-field-material-like';