Merge pull request #10 from sascha245/feature/store_module

Feature/store module

Author: sascha245

.gitignore

@@ -1,12 +1,23 @@
 node_modules
-build
-test
-src/**.js
-.idea/*
+/build
 
-coverage
-.nyc_output
-*.log
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
 
-package-lock.json
 yarn.lock
+package-lock.json

.npmignore

@@ -1,20 +1,27 @@
-src
-test
-tsconfig.json
-tsconfig.module.json
-tslint.json
-.travis.yml
+.vscode
 .github
+/node_modules
+/public
+/samples
+/build/tests
+/build/samples
+/src
+/tests
+
 .prettierignore
-.vscode
-build/docs
-example
-tests
-**/*.spec.*
-coverage
-.nyc_output
-*.log
+.prettierrc
 .editorconfig
+.postcssrc.js
+babel.config.js
+jest.config.js
+tsconfig.json
+tsconfig.prod.json
+tslint.json
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
-package-lock.json
 yarn.lock
+package-lock.json

.postcssrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

.vscode/settings.json

@@ -1,8 +1,16 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.formatOnSave": true,
+
+  "[javascript]": {
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.formatOnSave": true
+  },
+
   "editor.rulers": [100],
   "importSorter.generalConfiguration.sortOnBeforeSave": true
+  // "importSorter.importStringConfiguration.quoteMark": "double"
   // "typescript.implementationsCodeLens.enabled": true
   // "typescript.referencesCodeLens.enabled": true
 }

README.md

@@ -169,7 +169,61 @@ So for now `@Action` is still included, but it may happen that it is removed in
 #### How to setup your store
 
 1. Use `Vue.use(VuexSimple)`
-2. Use the StoreBuilder to load your modules
+
+2. Get a StoreBuilder instance.
+
+```ts
+// 1. Use getStoreBuilder()
+const storeBuilder = getStoreBuilder();
+
+// 2. Create a new instance yourself
+const storeBuilder = new StoreBuilder();
+
+```
+
+**Note:** `getStoreBuilder()` always returns the same instance
+
+3. (optional) Initialize your store options.
+
+```ts
+
+// 1. When using getStoreBuilder()
+const storeBuilder = getStoreBuilder();
+storeBuilder.initialize({
+  modules: {},
+  state: {},
+  strict: false
+})
+
+// 2. Pass directly in the StoreBuilder constructor
+const storeBuilder = new StoreBuilder({
+  modules: {},
+  state: {},
+  strict: false
+});
+
+```
+
+4. (optional) You can also use a custom container instance.
+
+```ts
+
+const myContainer = Container.of('myContainer');
+const storeBuilder = getStoreBuilder();
+
+// 1. Using the initialize function or in the StoreBuilder constructor
+storeBuilder.initialize({
+  container: myContainer
+})
+
+// 2. Using the 'useContainer' function
+storeBuilder.useContainer(myContainer);
+
+```
+
+**Note:** Be careful to set the container before you load your modules!
+
+5. Use the StoreBuilder to load your modules
 
 ```ts
 const storeBuilder = getStoreBuilder();
@@ -178,23 +232,70 @@ storeBuilder.loadModules([
 ]);
 ```
 
-3. (optional) Add your existing vuex modules: they will still work normally
+6. We finish by creating the store with `storeBuilder.create()`
+
+
+## FAQ
+
+**How to split up your modules:**</br>
+There are different ways to split up your modules:
+1. Do all the heavy lifting (like API requests and such) in other files or services and inject them in your module
+2. Split up your modules into smaller modules. If necessary, you can also inject other modules into your main module.
+
+In the case the 2 solutions above don't work out for you, you can also use inheritance to split up your files, though it isn't the most recommended way:
 
 ```ts
-const storeBuilder = getStoreBuilder();
-storeBuilder.addModule(namespace: string, module: Vuex.Module);
-```
+class CounterState {
+  @State()
+  public counter: number = 10;
+}
 
-4. We finish by creating the store with `storeBuilder.create()`
+class CounterGetters extends CounterState {
+  @Getter()
+  public get counterPlusHundred() {
+    return this.counter + 100;
+  }
+}
 
+class CounterMutations extends CounterGetters {
+  @Mutation()
+  public increment() {
+    this.counter++;
+  }
+}
 
-**Note:** We can't configure the root of the store **for now**. The store is also set to use strict mode by default.
+class CounterActions extends CounterMutations {
+  public async incrementAsync() {
+    await new Promise(r => setTimeout(r, 500));
+    this.increment();
+  }
+}
 
+@Module('counter')
+class CounterModule extends CounterActions {}
+```
 
 ## Contributors
 
 If you are interested and want to help out, don't hesitate to contact me or to create a pull request with your fixes / features.
 
+The project now also contains samples that you can use to directly test out your features during development.
+
+1. Clone the repository
+
+2. Install dependencies
+
+`npm install`
+
+3. Launch samples
+
+`npm run serve`
+
+4. Launch unit tests situated in *./tests*. The unit tests are written in Jest.
+
+`npm run test:unit`
+
+
 ## Bugs
 
 The core features presented should be stable.

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

jest.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  moduleFileExtensions: ["js", "jsx", "json", "vue", "ts", "tsx"],
+  transform: {
+    "^.+\\.vue$": "vue-jest",
+    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
+      "jest-transform-stub",
+    "^.+\\.tsx?$": "ts-jest"
+  },
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1"
+  },
+  snapshotSerializers: ["jest-serializer-vue"],
+  testMatch: [
+    "**/tests/unit/**/*.spec.(ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
+  ],
+  testURL: "http://localhost/"
+};