Merge pull request #37 from Jujulego/feat/react

Add react support

packages/core/.swcrc

@@ -4,7 +4,31 @@
       "syntax": "typescript"
     },
     "target": "es2022",
-    "loose": true
+    "assumptions": {
+      "arrayLikeIsIterable": true,
+      "constantReexports": true,
+      "constantSuper": true,
+      "enumerableModuleMeta": true,
+      "ignoreFunctionLength": true,
+      "ignoreFunctionName": true,
+      "ignoreToPrimitiveHint": true,
+      "iterableIsArray": true,
+      "mutableTemplateObject": true,
+      "noClassCalls": true,
+      "noDocumentAll": true,
+      "noIncompleteNsImportDetection": true,
+      "noNewArrows": true,
+      "objectRestNoSymbols": true,
+      "privateFieldsAsProperties": true,
+      "pureGetters": true,
+      "setClassMethods": true,
+      "setComputedProperties": true,
+      "setPublicClassFields": true,
+      "setSpreadProperties": true,
+      "skipForOfIteratorClosing": true,
+      "superIsCallableConstructor": false,
+      "tsEnumIsReadonly": true
+    }
   },
   "module": {
     "type": "es6"

packages/core/jest.config.ts

@@ -23,15 +23,15 @@ export default {
   collectCoverageFrom: ['src/**'],
 
   // The directory where Jest should output its coverage files
-  coverageDirectory: "coverage",
+  coverageDirectory: 'coverage',
 
   // An array of regexp pattern strings used to skip coverage collection
   // coveragePathIgnorePatterns: [
   //   "\\\\node_modules\\\\"
   // ],
 
   // Indicates which provider should be used to instrument code for coverage
-  // coverageProvider: "v8",
+  // coverageProvider: 'v8',
 
   // A list of reporter names that Jest uses when writing coverage reports
   // coverageReporters: [
@@ -100,7 +100,7 @@ export default {
   // notifyMode: "failure-change",
 
   // A preset that is used as a base for Jest's configuration
-  preset: 'ts-jest',
+  // preset: 'ts-jest',
 
   // Run tests from one or more projects
   // projects: undefined,
@@ -125,7 +125,7 @@ export default {
 
   // A list of paths to directories that Jest should use to search for files in
   roots: [
-    "<rootDir>/tests"
+    '<rootDir>/tests'
   ],
 
   // Allows you to use a custom runner instead of Jest's default test runner
@@ -144,7 +144,7 @@ export default {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  testEnvironment: "jsdom",
+  testEnvironment: 'jsdom',
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},
@@ -173,7 +173,9 @@ export default {
   // testRunner: "jest-circus/runner",
 
   // A map from regular expressions to paths to transformers
-  // transform: undefined,
+  transform: {
+    '^.+\\.(t|j)sx?$': ['@swc/jest']
+  },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
   // transformIgnorePatterns: [

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jujulego/aegis-core",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.12",
   "license": "MIT",
   "author": "Julien Capellari <julien.capellari@google.com>",
   "repository": {
@@ -19,13 +19,9 @@
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
   "exports": {
-    "node": {
-      "module": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
-    },
     "types": "./dist/types/index.d.ts",
     "module": "./dist/esm/index.js",
-    "default": "./dist/esm/index.js"
+    "require": "./dist/cjs/index.js"
   },
   "scripts": {
     "lint": "eslint {src,tests}/**/*.*",
@@ -41,6 +37,7 @@
     "@jujulego/flow": "1.1.0",
     "@swc/cli": "0.1.57",
     "@swc/core": "1.2.198",
+    "@swc/jest": "0.2.21",
     "@types/gulp": "4.0.9",
     "@types/jest": "28.1.1",
     "@types/node": "16.11.39",
@@ -56,6 +53,7 @@
     "gulp-cli": "2.3.0",
     "jest": "28.1.1",
     "jest-environment-jsdom": "28.1.1",
+    "regenerator-runtime": "0.13.9",
     "ts-jest": "28.0.4",
     "ts-node": "10.8.1",
     "typescript": "4.7.3"

packages/core/src/entities/list.ts

@@ -9,6 +9,7 @@ export class AegisList<T> extends TypedEventTarget<ListUpdateEvent<T>> {
   // Attributes
   private _ids: string[] = [];
   private _query?: WeakRef<AegisQuery<T[]>>;
+  private _cache?: WeakRef<T[]>;
   private readonly _extractor: EntityIdExtractor<T>;
 
   // Constructor
@@ -48,6 +49,7 @@ export class AegisList<T> extends TypedEventTarget<ListUpdateEvent<T>> {
     query.addEventListener('update', (event) => {
       if (event.state.status === 'completed') {
         this._ids = event.state.data.map((ent) => this._extractor(ent));
+        this._cache = undefined;
       }
 
       this.dispatchEvent(new ListUpdateEvent<T>(this));
@@ -58,6 +60,14 @@ export class AegisList<T> extends TypedEventTarget<ListUpdateEvent<T>> {
 
   // Properties
   get data(): T[] {
+    // Use cache first
+    const cached = this._cache?.deref();
+
+    if (cached) {
+      return cached;
+    }
+
+    // Read from store
     const data: T[] = [];
 
     for (const id of this._ids) {
@@ -68,6 +78,8 @@ export class AegisList<T> extends TypedEventTarget<ListUpdateEvent<T>> {
       }
     }
 
+    this._cache = new WeakRef(data);
+
     return data;
   }
 
@@ -82,6 +94,7 @@ export class AegisList<T> extends TypedEventTarget<ListUpdateEvent<T>> {
     }
 
     this._ids = ids;
+    this._cache = undefined;
     this.dispatchEvent(new ListUpdateEvent<T>(this));
   }
 

packages/core/src/stores/storage.store.ts

@@ -3,6 +3,9 @@ import { StoreUpdateEvent } from './store-update.event';
 
 // Class
 export class AegisStorageStore extends AegisStore {
+  // Attributes
+  private _cache = new Map<string, WeakRef<object>>();
+
   // Constructor
   constructor(readonly storage: Storage) {
     super();
@@ -20,6 +23,7 @@ export class AegisStorageStore extends AegisStore {
       if (event.storageArea === this.storage && event.key && event.newValue) {
         if (!event.key.startsWith('aegis:')) return;
 
+        this._cache.delete(event.key);
         const [, entity, id] = event.key.split(':');
 
         this.dispatchEvent(new StoreUpdateEvent(
@@ -32,14 +36,31 @@ export class AegisStorageStore extends AegisStore {
   }
 
   get<T>(entity: string, id: string): T | undefined {
-    const data = this.storage.getItem(this._key(entity, id)) || undefined;
-    return data && JSON.parse(data);
+    const key = this._key(entity, id);
+
+    // Use cache first
+    const cached = this._cache.get(key)?.deref() as T | undefined;
+
+    if (cached !== undefined) {
+      return cached;
+    }
+
+    // Read from storage
+    const data = this.storage.getItem(key) ?? undefined;
+    const parsed = data === undefined ? data : JSON.parse(data) as T;
+
+    if (typeof parsed === 'object') {
+      this._cache.set(key, new WeakRef(parsed as unknown as object));
+    }
+
+    return parsed;
   }
 
   set<T>(entity: string, id: string, data: T): T | undefined {
     const old = this.get<T>(entity, id);
 
     this.storage.setItem(this._key(entity, id), JSON.stringify(data));
+    this._cache.delete(this._key(entity, id));
     this.dispatchEvent(new StoreUpdateEvent<T>(entity, id, data, old));
 
     return old;
@@ -49,6 +70,7 @@ export class AegisStorageStore extends AegisStore {
     const old = this.get<T>(entity, id);
 
     this.storage.removeItem(this._key(entity, id));
+    this._cache.delete(this._key(entity, id));
 
     return old;
   }

packages/core/tests/stores/storage.store.test.ts

@@ -65,6 +65,13 @@ describe('AegisStorageStore.get', () => {
   it('should return undefined for unknown entities', () => {
     expect(store.get('unknown', 'unknown')).toBeUndefined();
   });
+
+  it('should return the same instance', () => {
+    store.set('test', 'get', { test: 1, success: true });
+
+    expect(store.get('test', 'get')).toEqual({ test: 1, success: true });
+    expect(store.get('test', 'get')).toBe(store.get('test', 'get'));
+  });
 });
 
 describe('AegisStorageStore.set', () => {

packages/react/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "../../.eslintrc.json"
+  ]
+}

packages/react/.gitignore

@@ -0,0 +1,3 @@
+# Generated files
+coverage
+dist

packages/react/.swcrc

@@ -0,0 +1,15 @@
+{
+  "jsc": {
+    "parser": {
+      "syntax": "typescript"
+    },
+    "target": "es2022",
+    "loose": true
+  },
+  "module": {
+    "type": "es6"
+  },
+  "env": {
+    "coreJs": "3.22"
+  }
+}

packages/react/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Julien Capellari
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/react/README.md

@@ -0,0 +1,7 @@
+# @jujulego/aegis-core
+[![Version](https://img.shields.io/npm/v/@jujulego/aegis-core)](https://www.npmjs.com/package/@jujulego/aegis-core)
+![Licence](https://img.shields.io/github/license/jujulego/aegis)
+[![Bundled size](https://badgen.net/bundlephobia/minzip/@jujulego/aegis-core)](https://bundlephobia.com/package/@jujulego/aegis-core)
+[![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/@jujulego/aegis-core)](https://bundlephobia.com/package/@jujulego/aegis-core)
+
+## Description

packages/react/gulpfile.ts

@@ -0,0 +1,44 @@
+import { flow, src, dest, swc, dts } from 'aegis-tools';
+import del from 'del';
+import gulp from 'gulp';
+import path from 'path';
+
+// Config
+const options = {
+  src: 'src/**/*.ts',
+  output: 'dist',
+  tsconfig: 'tsconfig.json',
+  deps: [
+    '../../.pnp.*'
+  ]
+}
+
+// Tasks
+gulp.task('clean', () => del(options.output));
+
+gulp.task('build:esm', () => flow(
+  src(options.src, { since: gulp.lastRun('build:esm') }),
+  swc({ module: { type: "es6" } }),
+  dest(path.join(options.output, 'esm'))
+));
+
+gulp.task('build:cjs', () => flow(
+  src(options.src, { since: gulp.lastRun('build:cjs') }),
+  swc({ module: { type: "commonjs" } }),
+  dest(path.join(options.output, 'cjs'))
+));
+
+gulp.task('build:types', () => flow(
+  src(options.src, { since: gulp.lastRun('build:types') }),
+  dts(options.tsconfig),
+  dest(path.join(options.output, 'types'))
+));
+
+gulp.task('build', gulp.series(
+  'clean',
+  gulp.parallel('build:cjs', 'build:esm', 'build:types'),
+));
+
+gulp.task('watch', () => gulp.watch([options.src, ...options.deps], { ignoreInitial: false },
+  gulp.parallel('build:cjs', 'build:esm', 'build:types'),
+));