Skip to content

Commit

Permalink
feat(targets: add JSON output to web compiler (#126)
Browse files Browse the repository at this point in the history
  • Loading branch information
roperzh committed May 19, 2020
1 parent 374c218 commit e4b134d
Show file tree
Hide file tree
Showing 4 changed files with 333 additions and 4 deletions.
2 changes: 2 additions & 0 deletions src/compiler/targets/src/targets/web.api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ export interface WebOutput extends TargetOutput<WebDependency, WebBinding> {
declarations: Set<string>;
declarationImports: Set<string>;
styleSheet: StyleSheet;
serializedTree: Record<string, any>;
}

/**
Expand All @@ -132,4 +133,5 @@ export enum WebLanguages {
Css = 'CSS',
Scss = 'SCSS',
JavaScript = 'JavaScript',
Json = 'JSON',
}
38 changes: 34 additions & 4 deletions src/compiler/targets/src/targets/web.compiler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,18 @@ import {Format, Log} from '@diez/cli-core';
import {
Compiler,
CompilerTargetHandler,
DiezComponent,
DiezType,
getAssemblerFactory,
MaybeNestedArray,
PrimitiveType,
Property,
TargetDiezComponent,
TargetProperty,
} from '@diez/compiler-core';
import {Target} from '@diez/engine';
import {getTempFileName, outputTemplatePackage} from '@diez/storage';
import {ensureDirSync, readFileSync, writeFileSync} from 'fs-extra';
import {ensureDirSync, readFileSync, writeFileSync, writeJsonSync} from 'fs-extra';
import {compile, registerHelper} from 'handlebars';
import {v4} from 'internal-ip';
import {join} from 'path';
Expand Down Expand Up @@ -182,6 +184,7 @@ export class WebCompiler extends Compiler<WebOutput, WebBinding> {
declarationImports: new Set<string>(),
dependencies: new Set<WebDependency>(),
assetBindings: new Map(),
serializedTree: {},
styleSheet: {
variables: new Map(),
font: new RuleList(),
Expand Down Expand Up @@ -238,6 +241,26 @@ export class WebCompiler extends Compiler<WebOutput, WebBinding> {
this.output.assetBindings.clear();
this.output.styleSheet.variables.clear();
this.output.styleSheet.styles.clear();
this.output.serializedTree = {};
}

protected async processComponentProperty (
property: Property,
instance: MaybeNestedArray<any>,
serializedInstance: MaybeNestedArray<any>,
component: DiezComponent,
) {
if (component.isRootComponent) {
const rootComponentType = component.type.toString();

if (!this.output.serializedTree[rootComponentType]) {
this.output.serializedTree[rootComponentType] = {};
}

this.output.serializedTree[rootComponentType][property.name] = serializedInstance;
}

return super.processComponentProperty(property, instance, serializedInstance, component);
}

private getStyleTokens (): StyleTokens {
Expand Down Expand Up @@ -292,11 +315,18 @@ export class WebCompiler extends Compiler<WebOutput, WebBinding> {
writeFileSync(join(staticRoot, `styles.${lang}`), compile(template)(tokens));
}

private writeJsonSdk (tokens: any) {
const staticRoot = this.parser.hot ? this.hotStaticRoot : this.staticRoot;
ensureDirSync(staticRoot);
writeJsonSync(join(staticRoot, 'tree.json'), tokens, {spaces: 2});
}

writeAssets () {
super.writeAssets();
const tokens = this.getStyleTokens();
this.writeStyleSdk('css', tokens);
this.writeStyleSdk('scss', tokens);
const styleTokens = this.getStyleTokens();
this.writeStyleSdk('css', styleTokens);
this.writeStyleSdk('scss', styleTokens);
this.writeJsonSdk(this.output.serializedTree);
}

/**
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"Primitives": {
"number": 10,
"integer": 10,
"float": 10,
"string": "ten",
"boolean": true,
"integers": 5,
"strings": "10",
"emptyList": [],
"child": {
"diez": 10
},
"childs": {
"diez": 10
},
"emptyChild": {},
"referred": 10
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,277 @@
{
"Bindings": {
"image": {
"file": {
"src": "assets/image%20with%20spaces.jpg",
"type": "image"
},
"file2x": {
"src": "assets/image%20with%20spaces@2x.jpg",
"type": "image"
},
"file3x": {
"src": "assets/image%20with%20spaces@3x.jpg",
"type": "image"
},
"file4x": {
"src": "assets/image%20with%20spaces@4x.jpg",
"type": "image"
},
"size": {
"width": 246,
"height": 246
}
},
"missingImage": {
"file": {
"src": "assets/unexistent-image-fallback-test.jpg",
"type": "image"
},
"file2x": {
"src": "assets/unexistent-image-fallback-test@2x.jpg",
"type": "image"
},
"file3x": {
"src": "assets/unexistent-image-fallback-test@3x.jpg",
"type": "image"
},
"file4x": {
"src": "assets/unexistent-image-fallback-test@4x.jpg",
"type": "image"
},
"size": {
"width": 0,
"height": 0
}
},
"lottie": {
"file": {
"src": "assets/lottie.json",
"type": "raw"
},
"loop": true,
"autoplay": true
},
"typograph": {
"font": {
"file": {
"src": "assets/SomeFont.ttf",
"type": "font"
},
"name": "SomeFont",
"fallbacks": [
"Verdana",
"serif"
],
"weight": 700,
"style": "normal"
},
"fontSize": 50,
"color": {
"h": 0.16666666666666666,
"s": 1,
"l": 0.5,
"a": 1
},
"iosTextStyle": "body",
"shouldScale": false,
"lineHeight": -1,
"letterSpacing": 0,
"alignment": "natural",
"decoration": []
},
"tallTypograph": {
"font": {
"file": {
"src": "assets/SomeFont.ttf",
"type": "font"
},
"name": "SomeFont",
"fallbacks": [
"Verdana",
"serif"
],
"weight": 700,
"style": "normal"
},
"fontSize": 50,
"color": {
"h": 0,
"s": 0,
"l": 0,
"a": 1
},
"iosTextStyle": "body",
"shouldScale": false,
"lineHeight": 100,
"letterSpacing": 10,
"alignment": "natural",
"decoration": [
"underline",
"strikethrough"
]
},
"linearGradient": {
"stops": [
{
"position": 0,
"color": {
"h": 0,
"s": 1,
"l": 0.5,
"a": 1
}
},
{
"position": 1,
"color": {
"h": 0.6666666666666666,
"s": 1,
"l": 0.5,
"a": 1
}
}
],
"start": {
"x": 0,
"y": 0.5
},
"end": {
"x": 1,
"y": 0.5
}
},
"point": {
"x": 0.5,
"y": 0.5
},
"size": {
"width": 400,
"height": 300
},
"shadow": {
"offset": {
"x": 1,
"y": 2
},
"radius": 3,
"color": {
"h": 0.3333333333333333,
"s": 1,
"l": 0.5,
"a": 0.5
}
},
"fill": {
"color": {
"h": 0,
"s": 1,
"l": 0.5,
"a": 1
},
"linearGradient": {
"stops": [
{
"position": 0,
"color": {
"h": 0,
"s": 0,
"l": 0,
"a": 1
}
},
{
"position": 1,
"color": {
"h": 0,
"s": 0,
"l": 1,
"a": 1
}
}
],
"start": {
"x": 0,
"y": 0
},
"end": {
"x": 1,
"y": 1
}
},
"type": "Color"
},
"panel": {
"cornerRadius": 5,
"background": {
"color": {
"h": 0.6666666666666666,
"s": 1,
"l": 0.5,
"a": 1
},
"linearGradient": {
"stops": [
{
"position": 0,
"color": {
"h": 0,
"s": 0,
"l": 0,
"a": 1
}
},
{
"position": 1,
"color": {
"h": 0,
"s": 0,
"l": 1,
"a": 1
}
}
],
"start": {
"x": 0,
"y": 0
},
"end": {
"x": 1,
"y": 1
}
},
"type": "Color"
},
"dropShadow": {
"offset": {
"x": 2,
"y": 3
},
"radius": 4,
"color": {
"h": 0,
"s": 1,
"l": 0.5,
"a": 1
}
},
"elevation": 6
},
"color": {
"h": 0,
"s": 0,
"l": 0,
"a": 1
},
"file": {
"src": "assets/SomeFile.txt",
"type": "raw"
},
"referencedColor": {
"h": 0,
"s": 0,
"l": 0.06274509803921569,
"a": 1
}
}
}

0 comments on commit e4b134d

Please sign in to comment.