Skip to content

Commit

Permalink
Merge pull request #66 from raxjs/feat/rename-import
Browse files Browse the repository at this point in the history 
feat(compiler): rename import from pwc
  • Loading branch information
@ChrisCindy
ChrisCindy authored May 6, 2022
2 parents 9e2bc7d + 5dd3adf commit e5b302d
Show file tree
Hide file tree
Showing 14 changed files with 383 additions and 229 deletions.
2 changes: 1 addition & 1 deletion jest.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ module.exports = {
coveragePathIgnorePatterns: ['<rootDir>/node_modules/'],
roots: ['<rootDir>/packages'],
testPathIgnorePatterns: ['/node_modules/', '/cjs/', '/esm/', '/es2017/', '/dist/', '.d.ts'],
testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
testMatch: ['**/__tests__/**/*.(spec|test).[jt]s?(x)'],
testEnvironment: 'jsdom',
transform: {
'\\.(js|ts|jsx|tsx)$': 'babel-jest',
Expand Down
190 changes: 8 additions & 182 deletions packages/pwc-compiler/__tests__/compileScript.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { parse, compileScript } from '../src';

const simpeComponent = `
const simpleComponent = `
<template>
<p>{{this.#text}}</p>
</template>
Expand All @@ -17,72 +17,6 @@ const noTemplateComponent = `
}
</script>`;

const mixNormalPropertyComponent = `
<template>
<p>{{this.#text}}</p>
</template>
<script>
export default class CustomElement extends HTMLElement {
#text = '';
data = {};
}
</script>
`;

const useObjectPropertyComponent = `
<template>
<p>{{this.data.name}}</p>
<p>{{this.arr[0]}}</p>
<p>{{this.nestedData.obj1.obj2.age}}</p>
</template>
<script>
export default class CustomElement extends HTMLElement {
data = {};
arr = [];
nestedData = {
obj1: {
obj2: {
age: 10
}
}
}
}
</script>
`;

const useOutsideVariableComponent = `
<template>
<p>{{outsideName}}</p>
<p>{{this.insideName}}</p>
</template>
<script>
import outsideName from './data';
export default class CustomElement extends HTMLElement {
insideName = '';
}
</script>
`;

const pureComponent = `
<template>
<p>hello</p>
</template>
<script>
export default class CustomElement extends HTMLElement {}
</script>`;

const definedComponent = `
<template>
<p>hello</p>
</template>
<script>
import { customElement } from 'pwc';
@customElement('custom-element')
export default class CustomElement extends HTMLElement {}
</script>
`;

const multipleKindsOfUsingBindingsComponent = `
<template>
<div
Expand Down Expand Up @@ -124,25 +58,8 @@ const multipleKindsOfUsingBindingsComponent = `
</script>`;

describe('compileScript', () => {
test('It should inject pwc', () => {
const { descriptor } = parse(simpeComponent);
const result = compileScript(descriptor);

expect(result.content).toContain(`import { customElement, reactive } from \"pwc\";`);
});

test('It should inject decorators', () => {
const { descriptor } = parse(simpeComponent);
const result = compileScript(descriptor);

expect(result.content).toContain(`@customElement("custom-element")
export default class CustomElement extends HTMLElement {
@reactive
accessor #text = '';`);
});

test('It should inject template getter method', () => {
const { descriptor } = parse(simpeComponent);
const { descriptor } = parse(simpleComponent);
const result = compileScript(descriptor);

expect(result.content).toContain(`get template() {
Expand All @@ -157,115 +74,24 @@ export default class CustomElement extends HTMLElement {
expect(result.content).not.toContain('get template()');
});

test('It should not add @reactive decorator to normal property', () => {
const { descriptor } = parse(mixNormalPropertyComponent);
const result = compileScript(descriptor);

expect(result.content).toEqual(`import { customElement, reactive } from "pwc";
@customElement("custom-element")
export default class CustomElement extends HTMLElement {
@reactive
accessor #text = '';
data = {};
get template() {
return ["\\n <p><!--?pwc_t--></p>\\n", [this.#text]];
}
}`);
});

test('It should add @reactive decorator to object property', () => {
const { descriptor } = parse(useObjectPropertyComponent);
const result = compileScript(descriptor);

expect(result.content).toEqual(`import { customElement, reactive } from "pwc";
@customElement("custom-element")
export default class CustomElement extends HTMLElement {
@reactive
accessor data = {};
@reactive
accessor arr = [];
@reactive
accessor nestedData = {
obj1: {
obj2: {
age: 10
}
}
};
get template() {
return ["\\n <p><!--?pwc_t--></p>\\n <p><!--?pwc_t--></p>\\n <p><!--?pwc_t--></p>\\n", [this.data.name, this.arr[0], this.nestedData.obj1.obj2.age]];
}
}`);
});

test('It should not add @reactive decorator to outside data', () => {
const { descriptor } = parse(useOutsideVariableComponent);
const result = compileScript(descriptor);

expect(result.content).toEqual(`import { customElement, reactive } from "pwc";
import outsideName from './data';
@customElement("custom-element")
export default class CustomElement extends HTMLElement {
@reactive
accessor insideName = '';
get template() {
return ["\\n <p><!--?pwc_t--></p>\\n <p><!--?pwc_t--></p>\\n", [outsideName, this.insideName]];
}
}`);
});

test('It should not import pwc with pure component', () => {
const { descriptor } = parse(pureComponent);
const result = compileScript(descriptor);

expect(result.content).toEqual(`import { customElement } from \"pwc\";
@customElement(\"custom-element\")
export default class CustomElement extends HTMLElement {
get template() {
return [\"\\n <p>hello</p>\\n\", []];
}
}`);
});

test('It should not import customElement again with defined component', () => {
const { descriptor } = parse(definedComponent);
const result = compileScript(descriptor);

expect(result.content).toEqual(`import { customElement } from 'pwc';
@customElement('custom-element')
export default class CustomElement extends HTMLElement {
get template() {
return [\"\\n <p>hello</p>\\n\", []];
}
}`);
});

test('It should handle multiple kinds of bindings', () => {
const { descriptor } = parse(multipleKindsOfUsingBindingsComponent);
const result = compileScript(descriptor);

expect(result.content).toEqual(`import { customElement, reactive } from "pwc";
@customElement("custom-element")
expect(result.content).toEqual(`import { customElement as __customElement, reactive as __reactive } from "pwc";
@__customElement("custom-element")
export default class CustomElement extends HTMLElement {
@reactive
@__reactive
accessor #data1 = '';
@reactive
@__reactive
accessor #data2 = {
name1: 'pwc'
};
@reactive
@__reactive
accessor data3 = {
arr1: []
};
@reactive
@__reactive
accessor data4 = {
obj1: {
name2: 'pwc'
Expand Down
64 changes: 64 additions & 0 deletions packages/pwc-compiler/__tests__/transforms/components.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
export const basicComponent = `
<template>
<p>{{this.#name}}</p>
</template>
<script>
export default class CustomElement extends HTMLElement {
#name = '';
}
</script>
`;

export const useCustomElementComponent = `
<template>
<p>hello</p>
</template>
<script>
import { customElement } from 'pwc';
@customElement('custom-element')
export default class CustomElement extends HTMLElement {}
</script>
`;

export const useReactiveComponent = `
<template>
<p>hello</p>
</template>
<script>
import { reactive } from 'pwc';
export default class CustomElement extends HTMLElement {
@reactive
accessor name = '';
}
</script>
`;

export const useReactiveWithAutoAddReactiveComponent = `
<template>
<p>{{this.#name}}</p>
</template>
<script>
import { reactive } from 'pwc';
export default class CustomElement extends HTMLElement {
#name = '';
@reactive
accessor data = '';
}
</script>
`;

export const reactiveHasBeenReactiveDecoratedManuallyComponent = `
<template>
<p>{{this.#name}}</p>
</template>
<script>
import { reactive } from 'pwc';
export default class CustomElement extends HTMLElement {
@reactive
accessor #name = '';
}
</script>
`;

36 changes: 36 additions & 0 deletions packages/pwc-compiler/__tests__/transforms/customElement.test.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { parse, compileScript } from '../../src';
import { basicComponent, useCustomElementComponent } from './components';

describe('customElement decorator', () => {
test('It should add customElement decorator', () => {
const { descriptor } = parse(basicComponent);
const result = compileScript(descriptor);

expect(result.content).toEqual(`import { customElement as __customElement, reactive as __reactive } from \"pwc\";
@__customElement("custom-element")
export default class CustomElement extends HTMLElement {
@__reactive
accessor #name = '';
get template() {
return ["\\n <p><!--?pwc_t--></p>\\n", [this.#name]];
}
}`);
});

test('It should not add customElement decorator if there is already customElement manually', () => {
const { descriptor } = parse(useCustomElementComponent);
const result = compileScript(descriptor);

expect(result.content).toEqual(`import { customElement } from 'pwc';
@customElement('custom-element')
export default class CustomElement extends HTMLElement {
get template() {
return ["\\n <p>hello</p>\\n", []];
}
}`);
});

});
33 changes: 33 additions & 0 deletions packages/pwc-compiler/__tests__/transforms/injectImportPWC.test.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { parse, compileScript } from '../../src';
import { basicComponent, useCustomElementComponent, useReactiveComponent, useReactiveWithAutoAddReactiveComponent } from './components';

describe('injectImportPWC', () => {
test('It should inject pwc', () => {
const { descriptor } = parse(basicComponent);
const result = compileScript(descriptor);

expect(result.content).toContain(`import { customElement as __customElement, reactive as __reactive } from \"pwc\";`);
});

test('It should not inject import customElement from pwc when imported customElement manually', () => {
const { descriptor } = parse(useCustomElementComponent);
const result = compileScript(descriptor);

expect(result.content).toContain(`import { customElement } from 'pwc';`);
});

test('It should not inject import reactive from pwc when there is no reactive variable in template', () => {
const { descriptor } = parse(useReactiveComponent);
const result = compileScript(descriptor);

expect(result.content).toContain(`import { reactive, customElement as __customElement } from 'pwc';`);
});


test('It should inject import reactive from pwc even if there is reactive imported manually', () => {
const { descriptor } = parse(useReactiveWithAutoAddReactiveComponent);
const result = compileScript(descriptor);

expect(result.content).toContain(`import { reactive, customElement as __customElement, reactive as __reactive } from 'pwc';`);
});
});
Loading

0 comments on commit e5b302d

Please sign in to comment.