.Net Core MVC hosted solution on GitHub. Node package source also on GitHub.
The essence of the idea was to be able to decorate a property of a type and have any setting of its value to be automatically persisted - along with a suitable getter implementation.
Sort of as shown below, meaning both the language and sourceCode properties should be persistent. The @LocalStorage decoration implies strongly that this persistence should be in HTML 5 local storage.
1: export class ExecutionComponent {
2: @LocalStorage('ELTB') language: string;
3: @LocalStorage('ELTB') sourceCode: string;
4: programOutput = '';
5: programInput = '';
6: running = false;
7: inputRequired = false;
8:
9: constructor(private _esolangService: EsolangService) {
10: console.log('built EC');
11: }
12: }
So, how do you achieve this? There are plenty of detailed articles around for how to implement a decorator (at the class, property etc level), so I'm not going to describe it in detail.
It's easier just to present the code below, which has these main points of interest (note that this is aggregated code for presentation purposes from the node package source for this project):
- Lines 2-7: Define an interface that represents the 'shape' of an object that can act as an interceptor for property gets and sets
- Lines 9-14: Another interface, that defines the contract for an options type; one that can be passed as part of the decorator if it is required to achieve more finely grained behaviour, supply a factory for creating DelegatedPropertyAction instances and so on
- Lines 16-35: the local storage decorator function entry point, that can be called with a union of types; either a string or an object that implements the AccessorOptions interface
- Lines 37-39: a decorator function entry point for allowing general property interception e.g. as in @PropertyInterceptor('{ storagePrefix: "_", createJsonOverride: false}). An example is show later on.
- Lines 41-82: A function that returns a function that implements the general property interception behaviour, with its behaviour directed somewhat by an instance of AccessorOptions
- Lines 85-113: An implementation of a DelegatedPropertyAction that gets and sets based on local storage
1:
2: export interface DelegatedPropertyAction {
3: propertyKey: string;
4: storageKey: string;
5: get(): any;
6: set(newValue: any): any;
7: }
8:
9: export interface AccessorOptions {
10: storagePrefix?: string;
11: factory?(propertyKey: string, storageKey: string): DelegatedPropertyAction;
12: preconditionsAssessor?(): boolean;
13: createToJsonOverride?: boolean;
14: }
15:
16: export function LocalStorage(optionsOrPrefix: string | AccessorOptions) {
17: function ensureConfigured(opts: AccessorOptions): AccessorOptions {
18: opts.preconditionsAssessor =
19: opts.preconditionsAssessor ||
20: (() => window.localStorage && true);
21: opts.factory =
22: opts.factory ||
23: ((p, c) => new LocalStorageDelegatedPropertyAction(p, c));
24: return opts;
25: }
26: return AccessHandler(
27: ensureConfigured(
28: typeof optionsOrPrefix === "string" ?
29: <AccessorOptions>{
30: storagePrefix: optionsOrPrefix,
31: createToJsonOverride: true
32: }
33: : optionsOrPrefix
34: ));
35: }
36:
37: export function PropertyInterceptor(options: AccessorOptions) {
38: return AccessHandler(options);
39: }
40:
41: function AccessHandler(options: AccessorOptions) {
42: return (target: Object, key?: string): void => {
43:
44: function makeKey(key: string) {
45: return (options.storagePrefix || '') + '/' + key;
46: }
47:
48: if (!options.preconditionsAssessor || options.preconditionsAssessor()) {
49:
50: let privateName = '$__' + key, storeKey = makeKey(key);
51:
52: target[privateName] = options.factory(key, storeKey);
53:
54: Object.defineProperty(target, key, {
55: get: function () {
56: return (<DelegatedPropertyAction>this[privateName]).get();
57: },
58: set: function (newVal: any) {
59: (<DelegatedPropertyAction>this[privateName]).set(newVal);
60: },
61: enumerable: true,
62: configurable: true
63: });
64:
65: const notedKey = '_notedKeys', jsonOverride = 'toJSON';
66:
67: target[notedKey] = target[notedKey] || [];
68: target[notedKey].push(key);
69:
70: options.factory(notedKey, makeKey(notedKey)).set(target[notedKey]);
71:
72: if (options.createToJsonOverride && !target.hasOwnProperty(jsonOverride)) {
73: target[jsonOverride] = function () {
74: let knownKeys = Array<string>(target[notedKey]);
75: let result = { _notedKeys: knownKeys };
76: knownKeys.forEach(x => result[x] = target[x]);
77: return result;
78: };
79: }
80: }
81: }
82: }
83:
84:
85: export class LocalStorageDelegatedPropertyAction implements DelegatedPropertyAction {
86:
87: storageKey: string;
88: propertyKey: string;
89: private val: any;
90:
91: constructor(propertyKey: string, canonicalKey: string) {
92: this.propertyKey = propertyKey;
93: this.storageKey = canonicalKey;
94: this.val = JSON.parse(this.read());
95: }
96:
97: get(): any {
98: return this.val;
99: }
100:
101: set(newValue: any) {
102: this.write(JSON.stringify(newValue));
103: this.val = newValue;
104: }
105:
106: private read() {
107: return localStorage.getItem(this.storageKey) || null;
108: }
109:
110: private write(val: any) {
111: localStorage.setItem(this.storageKey, val);
112: }
113: }
So, a contrived re-writing of the very first example, which adds no real value, could be:
1: @LocalStorage('ELTB') language: string;
2: @LocalStorage({
3: storagePrefix: 'ELTB',
4: factory: (p, c) =>
5: new LocalStorageDelegatedPropertyAction(p, c) })
6: sourceCode: string;
The solution on GitHub is a trivial test one, an example from its use is below, showing local storage contents mirroring the page content:
No comments:
Post a Comment