implement reactjs/rfcs#89

lib/Context/index.d.ts

@@ -0,0 +1,2 @@
+export declare const createContext: (defaultValue: any) => any;
+export declare const useContext: (Context: any) => any;

lib/Context/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var Prop_1 = require("../Prop");
+exports.createContext = function (defaultValue) {
+    var symbol = Symbol();
+    var Context = react_1.createContext(symbol);
+    var region = new Prop_1.default('data');
+    region.set(defaultValue);
+    Context.write = region.set;
+    Context.read = region.getValue;
+    Context.symbol = symbol;
+    Context.region = region;
+    return Context;
+};
+exports.useContext = function (Context) {
+    var region = Context.region, symbol = Context.symbol;
+    var providedValue = react_1.useContext(Context);
+    var value = region.useValue();
+    if (providedValue === symbol) {
+        return value;
+    }
+    return providedValue;
+};

lib/Prop/index.d.ts

@@ -2,16 +2,22 @@ import Region from '../Region';
 import { Config, LoadOption } from '../types';
 declare class Prop {
     region: Region;
-    constructor(config: Config);
-    set: (result: any, option: LoadOption) => any;
+    constructor(config?: Config);
+    set: (result: any, option?: LoadOption) => any;
     setBy: (option?: LoadOption) => (result: any) => any;
-    load: (asyncFunction: any, option: LoadOption) => Promise<any>;
-    loadBy: (asyncFunction: any, option: LoadOption) => (params: any) => Promise<any>;
+    load: (asyncFunction: any, option?: LoadOption) => Promise<any>;
+    loadBy: (asyncFunction: any, option?: LoadOption) => (params: any) => Promise<any>;
     getProps: () => {
         loading: boolean | undefined;
         fetchTime: number | undefined;
         error: string | undefined;
     } & import("../types").Props;
+    getValue: () => {
+        loading: boolean | undefined;
+        fetchTime: number | undefined;
+        error: string | undefined;
+    } & import("../types").Props;
     useProps: () => import("../types").Props;
+    useValue: () => any;
 }
 export default Prop;

lib/Prop/index.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var Region_1 = require("../Region");
 var Prop = /** @class */ (function () {
     function Prop(config) {
+        if (config === void 0) { config = 'data'; }
         var _this = this;
         this.set = function (result, option) {
+            if (option === void 0) { option = {}; }
             var region = _this.region;
             return region.set(region.name, result, option);
         };
@@ -14,21 +16,31 @@ var Prop = /** @class */ (function () {
             return region.setBy(region.name, option);
         };
         this.load = function (asyncFunction, option) {
+            if (option === void 0) { option = {}; }
             var region = _this.region;
             return region.load(region.name, asyncFunction, option);
         };
         this.loadBy = function (asyncFunction, option) {
+            if (option === void 0) { option = {}; }
             var region = _this.region;
             return region.loadBy(region.name, asyncFunction, option);
         };
         this.getProps = function () {
             var region = _this.region;
             return region.getProps(region.name);
         };
+        this.getValue = function () {
+            var region = _this.region;
+            return region.getProps(region.name);
+        };
         this.useProps = function () {
             var region = _this.region;
             return region.useProps(region.name);
         };
+        this.useValue = function () {
+            var region = _this.region;
+            return region.useValue(region.name);
+        };
         this.region = new Region_1.default(config);
     }
     return Prop;

lib/index.d.ts

@@ -1,3 +1,4 @@
 import Region from './Region';
 import Prop from './Prop';
+export { createContext, useContext } from './Context';
 export { Region, Prop };

lib/index.js

@@ -4,3 +4,6 @@ var Region_1 = require("./Region");
 exports.Region = Region_1.default;
 var Prop_1 = require("./Prop");
 exports.Prop = Prop_1.default;
+var Context_1 = require("./Context");
+exports.createContext = Context_1.createContext;
+exports.useContext = Context_1.useContext;

src/Context/index.ts

@@ -0,0 +1,24 @@
+import { createContext as createReactContext, useContext as useReactContext } from 'react';
+import Prop from '../Prop';
+
+export const createContext = (defaultValue: any) => {
+  const symbol = Symbol();
+  const Context = createReactContext(symbol) as any;
+  const region = new Prop('data');
+  region.set(defaultValue);
+  Context.write = region.set;
+  Context.read = region.getValue;
+  Context.symbol = symbol;
+  Context.region = region;
+  return Context;
+};
+
+export const useContext = (Context: any) => {
+  const { region, symbol } = Context;
+  const providedValue = useReactContext(Context);
+  const value = region.useValue();
+  if (providedValue === symbol) {
+    return value;
+  }
+  return providedValue;
+};

src/Prop/index.ts

@@ -4,11 +4,11 @@ import { AsyncFunction, Config, LoadOption, Result } from '../types';
 class Prop {
   region: Region;
 
-  constructor(config: Config) {
+  constructor(config: Config = 'data') {
     this.region = new Region(config);
   }
 
-  set = (result: Result, option: LoadOption) => {
+  set = (result: Result, option: LoadOption= {}) => {
     const { region } = this;
     return region.set(region.name, result, option);
   }
@@ -18,12 +18,12 @@ class Prop {
     return region.setBy(region.name, option);
   }
 
-  load = (asyncFunction: AsyncFunction, option: LoadOption) => {
+  load = (asyncFunction: AsyncFunction, option: LoadOption= {}) => {
     const { region } = this;
     return region.load(region.name, asyncFunction, option);
   }
 
-  loadBy = (asyncFunction: AsyncFunction, option: LoadOption) => {
+  loadBy = (asyncFunction: AsyncFunction, option: LoadOption= {}) => {
     const { region } = this;
     return region.loadBy(region.name, asyncFunction, option);
   }
@@ -33,10 +33,20 @@ class Prop {
     return region.getProps(region.name);
   }
 
+  getValue = () => {
+    const { region } = this;
+    return region.getProps(region.name);
+  }
+
   useProps = () => {
     const { region } = this;
     return region.useProps(region.name);
   }
+
+  useValue = () => {
+    const { region } = this;
+    return region.useValue(region.name);
+  }
 }
 
 export default Prop;

src/__test__/index.test.ts

@@ -3,7 +3,7 @@ import * as api from '..';
 describe('export api', () => {
   test('api contains Region and provide', () => {
     // @ts-ignore
-    const { __esModule, Region, Prop, ...rest } = api;
+    const { __esModule, Region, Prop, createContext, useContext, ...rest } = api;
     expect(__esModule || __esModule === undefined).toBe(true);
     expect(typeof Region).toBe('function');
     expect(typeof Prop).toBe('function');

src/index.ts

@@ -1,4 +1,5 @@
 import Region from './Region';
 import Prop from './Prop';
 
+export { createContext, useContext } from './Context';
 export { Region, Prop };