Merge pull request #9 from lppjunior/develop

lppjunior · web-flow · commit de9948ee092c · 2020-08-25T15:51:06.000-03:00
### Fixbug
- Fix bug on middleware implementation
### Update
- Update documentation structure
- Add separated pattern webpack build
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.2.1] - 2020-08-25
 ### Fixbug
 - Fix bug on middleware implementation
+### Update
+- Update documentation structure
+- Add separated pattern webpack build
 
 ## [1.2.0] - 2020-08-25
 ### Feature
diff --git a/README.md b/README.md
@@ -7,85 +7,12 @@ See many characteristics of this library:
 - All pattern hav 100% coverage unity tests and confiability.
 - Use 100% native javascript to write this code
 
-| Available Patterns        |
-|---------------------------|
-| [Middleware](#Middleware) |
-| [Observer](#Observer)     |
-| [Pipeline](#Pipeline)     |
-
-## Middleware
-A single implementation of Middleware pattern
-
-**Class structure**
-```js
-class Middleware() {
-    use(callback: function)
-    process(...data: object)
-}
-```
-
-## Example
-
-```js
-  const middleware = new Middleware()
-
-  middleware.use((param1, param2, param3, next) => {
-    param1 = 'param 1 UPDATED'
-    console.log('Execution 1', param1, param2, param3)
-    next()
-  })
-
-  middleware.use((param1, param2, param3, next) => {
-    console.log('Execution 2', param1, param2, param3) // param1 = 'param 1 UPDATED'
-    next()
-  })
-
-  middleware.process('param 1', 'param 2', 'param 3')
-```
-
-## Observer
-The instance (or model) maintains a collection of objects (observers) and will notify them of any changes in their state.
-
-**Class structure**
-```js
-class Observer() {
-    on(event: string, callback: function)
-    emit(event: string, data: object)
-}
-```
-
-## Example
-
-```js
-  const observer = new Observer()
-
-  observer.on('test', (data) => console.log(data)) // result: Observer emit successful
-  observer.on('test', (data) => console.log('Test 2 > ', data)) // result: Test 2 > Observer emit successful
-
-  observer.emit('test', { status: 'Observer emit successful' })
-```
-
-## Pipeline
-A Pipeline pattern implementation
-
-**Class structure**
-```js
-class Pipeline() {
-    pipe(callback: function)
-    process(data: object)
-}
-```
-
-## Example
-
-```js
-  const result = (new Pipeline())
-    .pipe((data) => data + 5)
-    .pipe((data) => data * 20)
-    .pipe((data) => data / 2)
-    .process(5) // result 100
-
-```
+## Available Patterns
+| Pattern | Description|
+| - | - |
+| [Middleware](docs/MIDDLEWARE-PATTERN-JS.md) | The Middleware standard creates an execution queue where a step has the power to call the next step or interrupt the execution |
+| [Observer](docs/OBSERVER-PATTERN-JS.md)     | The Observer pattern is powerfull resource to emit and receive notifications |
+| [Pipeline](docs/PIPELINE-PATTERN-JS.md)     | The pipeline pattern make a execution queue passing processed result to next step |
 
 ## Versioning
 
diff --git a/dist/favicon.png b/dist/favicon.png
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1 @@
+<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"><title>Pattern JS</title><link rel="icon" href="favicon.png"></head><body><h1>Patter JS</h1><p>Open you inspection to see result</p><script src="middleware.js"></script><script src="observer.js"></script><script src="pipeline.js"></script><script src="main.js"></script></body></html>
diff --git a/dist/main.js b/dist/main.js
diff --git a/dist/main.js.map b/dist/main.js.map
diff --git a/dist/middleware.js b/dist/middleware.js
@@ -0,0 +1,21 @@
+function testMiddleware () {
+  const middleware = new Middleware()
+  middleware.use((param1, param2, next) => {
+    console.log('[middleware] 1 ', param1, param2)
+    next()
+  })
+
+  middleware.use((param1, param2, next) => {
+    console.log('[middleware] 2 ', param1, param2)
+    next()
+  })
+
+  middleware.use((param1, param2, next) => {
+    console.log('[middleware] 3 ', param1, param2)
+    next()
+  })
+
+  middleware.process({ test: 123, value: 'aaa' }, 'test')
+}
+
+document.addEventListener('DOMContentLoaded', testMiddleware, false)
diff --git a/dist/observer.js b/dist/observer.js
@@ -0,0 +1,13 @@
+function runExample () {
+  testObserver()
+}
+
+function testObserver () {
+  console.log('[observer] ', 'test')
+  const observer = new Observer()
+  observer.on('test', (data) => console.log('[observer] ', data))
+  observer.on('test', (data) => console.log('[observer] ', 'Test 2 > ', data))
+  observer.emit('test', { status: 'Observer emit successful' })
+}
+
+document.addEventListener('DOMContentLoaded', runExample, false)
diff --git a/dist/pipeline.js b/dist/pipeline.js
@@ -0,0 +1,20 @@
+function testPipeline () {
+  const result = (new Pipeline())
+    .pipe((data) => {
+      console.log('[pipeline] ', data + ' + ' + 5)
+      return data + 5
+    })
+    .pipe((data) => {
+      console.log('[pipeline] ', data + ' * ' + 3)
+      return data * 3
+    })
+    .pipe((data) => {
+      console.log('[pipeline] ', data + ' + ' + 150)
+      return data + 150
+    })
+    .process(5)
+
+  console.log('[pipeline] result: ', result)
+}
+
+document.addEventListener('DOMContentLoaded', testPipeline, false)
diff --git a/docs/MIDDLEWARE-PATTERN-JS.md b/docs/MIDDLEWARE-PATTERN-JS.md
@@ -0,0 +1,34 @@
+# Middleware Pattern
+The Middleware standard creates an execution queue where a step has the power to call the next step or interrupt the execution
+
+**Class structure**
+```js
+class Middleware() {
+    use(callback: function)
+    process(...data: object)
+}
+```
+
+## Example
+
+```js
+  const middleware = new Middleware()
+
+  middleware.use((param1, param2, param3, next) => {
+    console.log('Execution 1', param1, param2, param3)
+
+    if ( param1 !== 'param 1') {
+      throw new Error('Param 1 is incorrect')
+    }
+
+    next()
+  })
+
+  middleware.use((param1, param2, param3, next) => {
+    console.log('Execution 2', param1, param2, param3)
+
+    next()
+  })
+
+  middleware.process('param 1', 'param 2', 'param 3')
+```
diff --git a/docs/OBSERVER-PATTERN-JS.md b/docs/OBSERVER-PATTERN-JS.md
@@ -0,0 +1,21 @@
+# Observer Pattern
+The Observer pattern is powerfull resource to emit and receive notifications.
+
+**Class structure**
+```js
+class Observer() {
+    on(event: string, callback: function)
+    emit(event: string, data: object)
+}
+```
+
+## Example
+
+```js
+  const observer = new Observer()
+
+  observer.on('test', (data) => console.log(data)) // result: Observer emit successful
+  observer.on('test', (data) => console.log('Test 2 > ', data)) // result: Test 2 > Observer emit successful
+
+  observer.emit('test', { status: 'Observer emit successful' })
+```
diff --git a/docs/PIPELINE-PATTERN-JS.md b/docs/PIPELINE-PATTERN-JS.md
@@ -0,0 +1,21 @@
+# Pipeline Pattern
+The pipeline pattern make a execution queue passing processed result to next step.
+
+**Class structure**
+```js
+class Pipeline() {
+    pipe(callback: function)
+    process(data: object)
+}
+```
+
+## Example
+
+```js
+  const result = (new Pipeline())
+    .pipe((data) => data + 5)
+    .pipe((data) => data * 20)
+    .pipe((data) => data / 2)
+    .process(5) // result 100
+
+```
diff --git a/webpack.config.js b/webpack.config.js
@@ -3,35 +3,61 @@ const CopyPlugin = require('copy-webpack-plugin')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 const path = require('path')
 
-module.exports = {
-  entry: {
-    patterns: './src'
-  },
-  output: {
-    filename: 'src/[name].min.js',
-    path: path.resolve(__dirname, 'dist'),
-    libraryTarget: 'umd'
+const config = {}
+
+const process = [
+  {
+    ...config,
+    name: "all",
+    entry: {
+      patterns: './src'
+    },
+    output: {
+      filename: 'src/[name].min.js',
+      path: path.resolve(__dirname, 'dist'),
+      libraryTarget: 'umd'
+    }
   },
-  devtool: 'source-map',
-  plugins: [
-    new CleanWebpackPlugin(),
-    new HtmlWebpackPlugin({
-      title: 'Pattern JS',
-      favicon: 'src-example/favicon.png',
-      template: 'src-example/index.html'
-    }),
-    new CopyPlugin({
-      patterns: [
-        path.resolve(__dirname, 'src-example', 'src')
-      ]
-    })
-  ],
+  {
+    ...config,
+    name: "unity",
+    entry: {
+      middleware: './src/pattern/middleware',
+      pipeline: './src/pattern/pipeline',
+      observer: './src/pattern/observer'
+    },
+    output: {
+      filename: 'src/pattern/[name].min.js',
+      path: path.resolve(__dirname, 'dist'),
+      libraryTarget: 'umd'
+    }
+  }
+]
+
+module.exports = [
+  ...process,
+  {
+    devtool: 'source-map',
+    plugins: [
+      new CleanWebpackPlugin(),
+      new HtmlWebpackPlugin({
+        title: 'Pattern JS',
+        favicon: 'src-example/favicon.png',
+        template: 'src-example/index.html'
+      }),
+      new CopyPlugin({
+        patterns: [
+          path.resolve(__dirname, 'src-example', 'src')
+        ]
+      })
+    ],
 
-  // webpack-dev-server configurations
-  devServer: {
-    compress: true,
-    contentBase: path.join(__dirname, 'dist'),
-    open: true,
-    port: 9000
+    // webpack-dev-server configurations
+    devServer: {
+      compress: true,
+      contentBase: path.join(__dirname, 'dist'),
+      open: true,
+      port: 9000
+    }
   }
-}
+]

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"><title>Pattern JS</title><link rel="icon" href="favicon.png"></head><body><h1>Patter JS</h1><p>Open you inspection to see result</p><script src="middleware.js"></script><script src="observer.js"></script><script src="pipeline.js"></script><script src="main.js"></script></body></html>`