Wednesday, April 4, 2018

Saving Type in localStorage works in development, but not in production

Leave a Comment

I tried to stringify a type, save it to localStorage and parse it again to create a dynamic component in Angular. The code is:

// panelTypes is a map of type: [ SomeComponent, AnotherComponent, ...] private panelTypes: Type<DockablePanel>[];  // Stringifying const saveString = JSON.stringify(this.dockTree, (key, value) => {   if (key === 'type') {     const panel: Type<DockablePanel> = this.panelTypes.find((panelType: Type<DockablePanel>) => {       return panelType.name === value;     });     if (!panel) {       console.log('Couldn\'t find paneltype ' + value);     } else {       return panel;     }   } else {     return value;   } });  // Parsing const stored = JSON.parse(storageItem, (key, value) => {   if (key === 'type') {     return value.name;   } else {     return value;   } }); 

This works when running in development, but in production the code gets obfuscated/minified, resulting in every value.name being something like 'e' or 'n'.

Is there a way to stringify and later parse a type in TypeScript? Do JavaScript classes have something I can use to identify types?

If not, is there a way to prevent certain values from being obfuscated/minified?

[edit]

I'm trying to store/restore a dynamic layout using Angular's ComponentFactoryResolver like this:

constructor(private componentFactoryResolver: ComponentFactoryResolver,           private dockerService: DockerService,           private application: ApplicationRef,           private changeDetector: ChangeDetectorRef) { }  ngOnInit(): void {     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.panel.type);     this.panelRef = this.dynamicInsert.createComponent(componentFactory); } 

DockTree is a tree consisting of two types of DockNodes: DockContainers and DockPanels:

export class DockTreeNode {   parent: DockTreeContainer; }  export class DockTreeContainer extends DockTreeNode {   private orientation: Orientation;   private left: DockTreeNode;   private right: DockTreeNode; }  export class DockTreePanel extends DockTreeNode {   type: Type<DockablePanel>;   args: DockArguments;   movable: boolean;   ref?: ViewRef; } 

So my tree looks like this:

enter image description here

Every panel node has a type field that should hold a Type. This type needs to be saved to localStorage, and later recovered from it. Minifiying gives me shortened nonsense classnames in Object.name though, so I can't use that.

0 Answers

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment