feat(compiler): rename import from pwc

jest.config.js

@@ -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',

packages/pwc-compiler/__tests__/compileScript.test.ts

@@ -1,6 +1,6 @@
 import { parse, compileScript } from '../src';
 
-const simpeComponent = `
+const simpleComponent = `
 <template>
   <p>{{this.#text}}</p>
 </template>
@@ -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
@@ -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() {
@@ -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'

packages/pwc-compiler/__tests__/transforms/components.ts

@@ -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>
+`;
+

packages/pwc-compiler/__tests__/transforms/customElement.test.ts

@@ -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", []];
+  }
+
+}`);
+  });
+
+});

packages/pwc-compiler/__tests__/transforms/injectImportPWC.test.ts

@@ -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';`);
+  });
+});