refactor: Change syntax to support closers capturing variables (#140)

* refactor: Change syntax to support closers capturing variables

Change syntax from:
```typescript
const Counter = qComponent<{}, {count: number}>({
  onMount: qHook(() => {count: 0}),
  onRender: qHook((props, state) => (
    <button on:click={qHook<typeof Counter>((props, state) => state.count++)}>
      {state.count}
    </button>
  )
});
```
to:
```typescript
const Counter = qComponent<>(() => {
  const state = useState();
  return onRender(() => (
    <button on:click={() => state.count++)}>
      {state.count}
    </button>
  )
});
```

Co-authored-by: Adam Bradley <[email protected]>
Co-authored-by: Manu MA <[email protected]>

* fixup! refactor: Change syntax to support closers capturing variables

* fixup! fixup! refactor: Change syntax to support closers capturing variables

* fixup! refactor: Change syntax to support closers capturing variables

* fixup! fixup! refactor: Change syntax to support closers capturing variables

* fixup! fixup! fixup! refactor: Change syntax to support closers capturing variables

* fixup! fixup! fixup! fixup! refactor: Change syntax to support closers capturing variables

* fixup! fixup! fixup! fixup! fixup! refactor: Change syntax to support closers capturing variables

Co-authored-by: Adam Bradley <[email protected]>
Co-authored-by: Manu MA <[email protected]>

Author: 3 people

.github/workflows/ci.yml

@@ -38,8 +38,7 @@ jobs:
         uses: actions/cache@v2
         with:
           path: node_modules
-          key: npm-cache-ubuntu-${{ hashFiles('yarn.lock') }}
-          restore-keys: npm-cache-ubuntu-
+          key: npm-cache-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
 
       - name: Install NPM Dependencies
         run: yarn install --frozen-lockfile --registry https://registry.npmjs.org --network-timeout 300000
@@ -84,23 +83,20 @@ jobs:
         uses: actions/cache@v2
         with:
           path: node_modules
-          key: npm-cache-ubuntu-${{ hashFiles('yarn.lock') }}
-          restore-keys: npm-cache-ubuntu-
+          key: npm-cache-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
 
       - name: Cache cargo dependencies
         uses: actions/cache@v2
         with:
           path: |
             ~/.cargo
-          key: cargo-deps-wasm-${{ hashFiles('Cargo.lock') }}
-          restore-keys: cargo-deps-wasm-
+          key: cargo-deps-wasm-${{ runner.os }}-${{ hashFiles('Cargo.lock') }}
 
       - name: Cache cargo build
         uses: actions/cache@v2
         with:
           path: src/wasm/target
-          key: cargo-build-wasm-${{ hashFiles('./src/wasm/Cargo.lock') }}
-          restore-keys: cargo-build-wasm-
+          key: cargo-build-wasm-${{ runner.os }}-${{ hashFiles('./src/wasm/Cargo.lock') }}
 
       - name: Install wasm-pack
         run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
@@ -171,7 +167,6 @@ jobs:
         with:
           path: node_modules
           key: npm-cache-${{ matrix.settings.target }}-${{ hashFiles('yarn.lock') }}
-          restore-keys: npm-cache-${{ matrix.settings.target }}-
 
       - name: Pull Latest Image
         if: ${{ matrix.settings.docker }}
@@ -187,14 +182,12 @@ jobs:
           path: |
             ~/.cargo
           key: cargo-deps-${{ matrix.settings.target }}-${{ hashFiles('Cargo.lock') }}
-          restore-keys: cargo-deps-${{ matrix.settings.target }}-
 
       - name: Cache cargo build
         uses: actions/cache@v2
         with:
           path: target
           key: cargo-build-${{ matrix.settings.target }}-${{ hashFiles('Cargo.lock') }}
-          restore-keys: cargo-deps-${{ matrix.settings.target }}-
 
       - name: Setup Toolchain
         if: ${{ matrix.settings.setup }}
@@ -215,18 +208,17 @@ jobs:
           path: dist-dev/@builder.io-qwik/bindings/*.node
           if-no-files-found: error
 
-  ############ RELEASE ############
-  release:
-    name: Release
+  ############ BUILD DISTRIBUTION ############
+  build-distribution:
+    name: Build Distribution
     if: "!contains(github.event.head_commit.message, 'skip ci')"
     runs-on: ubuntu-latest
     needs:
       - build-package
       - build-wasm
       - build-bindings
-      - validate-rust
       - test-unit
-      #- test-e2e
+      - validate-rust
 
     steps:
       - name: Setup Node.js
@@ -235,9 +227,6 @@ jobs:
           node-version: 16.x
           registry-url: https://registry.npmjs.org/
 
-      - name: Checkout
-        uses: actions/checkout@v2
-
       - name: Create dist-dev/@builder.io-qwik directory
         run: |
           mkdir dist-dev/
@@ -247,10 +236,10 @@ jobs:
       - name: Download Build Artifacts
         uses: actions/download-artifact@v2
 
-      - name: Print Package Artifacts
+      - name: Print Distribution Artifacts
         run: ls -R dist-dev-builder-io-qwik/
 
-      - name: Move Package Artifacts
+      - name: Move Distribution Artifacts
         run: mv dist-dev-builder-io-qwik/* dist-dev/@builder.io-qwik/
 
       - name: Print Bindings Artifacts
@@ -262,12 +251,50 @@ jobs:
       - name: Print dist-dev
         run: ls -R dist-dev/
 
+      - name: Upload Qwik Distribution Artifact
+        if: ${{ always() }}
+        uses: actions/upload-artifact@master
+        with:
+          name: builderio-qwik-distribution
+          path: dist-dev/@builder.io-qwik/*
+          if-no-files-found: error
+
+  ############ RELEASE ############
+  release:
+    name: Release
+    if: "!contains(github.event.head_commit.message, 'skip ci')"
+    runs-on: ubuntu-latest
+    needs:
+      - build-distribution
+      - test-e2e
+
+    steps:
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16.x
+          registry-url: https://registry.npmjs.org/
+
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Download Build Artifacts
+        uses: actions/download-artifact@v2
+
+      - name: Print Distribution Artifacts
+        run: ls -R builderio-qwik-distribution/
+
+      - name: Move Distribution Artifacts
+        run: |
+          mkdir dist-dev/
+          mkdir dist-dev/@builder.io-qwik/
+          mv builderio-qwik-distribution/* dist-dev/@builder.io-qwik/
+
       - name: Cache NPM Dependencies
         uses: actions/cache@v2
         with:
           path: node_modules
-          key: npm-cache-ubuntu-${{ hashFiles('yarn.lock') }}
-          restore-keys: npm-cache-ubuntu-
+          key: npm-cache-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
 
       - name: Install NPM Dependencies
         run: yarn install --frozen-lockfile --registry https://registry.npmjs.org --network-timeout 300000
@@ -286,13 +313,63 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-      - name: Upload Qwik Package Artifact
-        if: ${{ always() }}
-        uses: actions/upload-artifact@master
+  ############ E2E TEST ############
+  test-e2e:
+    name: E2E Tests
+    strategy:
+      fail-fast: false
+      matrix:
+        settings:
+          - host: ubuntu-latest
+            browser: chromium
+          - host: macos-latest
+            browser: webkit
+          - host: windows-latest
+            browser: firefox
+
+    runs-on: ${{ matrix.settings.host }}
+    needs:
+      - build-distribution
+
+    steps:
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
         with:
-          name: BuilderIO-qwik
-          path: dist-dev/*.tgz
-          if-no-files-found: error
+          node-version: 16.x
+          registry-url: https://registry.npmjs.org/
+
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Download Build Artifacts
+        uses: actions/download-artifact@v2
+
+      - name: Print Distribution Artifacts
+        run: ls -R builderio-qwik-distribution/
+
+      - name: Move Distribution Artifacts
+        run: |
+          mkdir dist-dev/
+          mkdir dist-dev/@builder.io-qwik/
+          mv builderio-qwik-distribution/* dist-dev/@builder.io-qwik/
+
+      - name: Print Directory
+        run: ls -R ./
+
+      - name: Cache NPM Dependencies
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: npm-cache-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+
+      - name: Install NPM Dependencies
+        run: yarn install --frozen-lockfile --registry https://registry.npmjs.org --network-timeout 300000
+
+      - name: Install Playwright
+        run: npx playwright install ${{ matrix.settings.browser }} && npx playwright install-deps ${{ matrix.settings.browser }}
+
+      - name: Playwright E2E Tests
+        run: yarn test.e2e.${{ matrix.settings.browser }}
 
   ############ UNIT TEST ############
   test-unit:
@@ -313,54 +390,14 @@ jobs:
         uses: actions/cache@v2
         with:
           path: node_modules
-          key: npm-cache-ubuntu-${{ hashFiles('yarn.lock') }}
-          restore-keys: npm-cache-ubuntu-
+          key: npm-cache-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
 
       - name: Install NPM Dependencies
         run: yarn install --frozen-lockfile --registry https://registry.npmjs.org --network-timeout 300000
 
       - name: Jest Unit Tests
         run: yarn test.unit
 
-  ############ E2E TEST ############
-  # test-e2e:
-  #   name: E2E Tests
-  #   runs-on: ubuntu-latest
-
-  #   steps:
-  #     - name: Setup Node.js
-  #       uses: actions/setup-node@v1
-  #       with:
-  #         node-version: 10.x
-  #         registry-url: https://registry.npmjs.org/
-
-  #     - name: Checkout
-  #       uses: actions/checkout@v2
-
-  #     - name: E2E Tests
-  #       uses: cypress-io/github-action@v2
-  #       with:
-  #         install-command: yarn --frozen-lockfile --ignore-engines
-  #         start: yarn integration.server.prod
-  #         wait-on: 'http://localhost:8081'
-  #         wait-on-timeout: 120
-  #         browser: chrome
-  #         record: true
-  #         group: 'Qwik E2E Test Group'
-  #         spec: cypress/integration/*
-  #         config-file: cypress/cypress.json
-  #         config: defaultCommandTimeout=10000
-  #       env:
-  #         CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-  #         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  #     - name: Upload Videos Artifacts
-  #       uses: actions/upload-artifact@v1
-  #       if: always()
-  #       with:
-  #         name: Cypress Videos
-  #         path: cypress/videos
-
   ########### VALIDATE RUST ############
   validate-rust:
     name: Validate Rust
@@ -383,15 +420,13 @@ jobs:
         with:
           path: |
             ~/.cargo
-          key: ${{ runner.os }}-cargo-deps-${{ hashFiles('Cargo.lock') }}
-          restore-keys: ${{ runner.os }}-cargo-deps-
+          key: cargo-deps-${{ runner.os }}-${{ hashFiles('Cargo.lock') }}
 
       - name: Cache cargo build
         uses: actions/cache@v2
         with:
           path: target
-          key: ${{ runner.os }}-cargo-build-${{ hashFiles('Cargo.lock') }}
-          restore-keys: ${{ runner.os }}-cargo-build-
+          key: cargo-build-${{ runner.os }}-${{ hashFiles('Cargo.lock') }}
 
       - name: Format check
         uses: actions-rs/cargo@v1
@@ -430,8 +465,7 @@ jobs:
         uses: actions/cache@v2
         with:
           path: node_modules
-          key: npm-cache-ubuntu-${{ hashFiles('yarn.lock') }}
-          restore-keys: npm-cache-ubuntu-
+          key: npm-cache-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
 
       - name: Install NPM Dependencies
         run: yarn install --frozen-lockfile --registry https://registry.npmjs.org --network-timeout 300000

.gitignore

@@ -17,9 +17,6 @@ integration/todo/output
 integration/*.js
 integration/*.cjs
 integration/*.map
-cypress/screenshots
-cypress/videos
-cypress/fixtures/
 src/napi/package-*
 target
 *.node

DEVELOPER.md

@@ -17,23 +17,9 @@ Next the `start` command will:
 npm start
 ```
 
-## Running Dev Server Integration Tests
-
-The `integration/` directory is for this local repo's end-to-end and integration testing (and not necessarily app demos). Its dev server is setup to always point to the local build and stay current with the watch process.
-
-First start the integration dev server, which will also ensure a build was completed:
-
-```
-npm run integration.server
-```
-
-Then navigate to http://localhost:8080/
-
-The `npm run integration.server` commands runs the server in `development` mode, where files are not minified, source maps are inlined, and there's additional logging. To run code minified with external source maps and without extra logs, run `npm run integration.server.prod`, which is what the end-to-end tests use.
-
 ## Running All Tests
 
-To run all Unit tests ([Jest](https://jestjs.io/)) and E2E/Integration tests ([Cypress](https://www.cypress.io/)), run:
+To run all Unit tests ([Jest](https://jestjs.io/)) and E2E tests [Playwright](https://playwright.dev/), run:
 
 ```
 npm test
@@ -61,20 +47,14 @@ To debug and step through unit tests, within VSCode you can use the "Integration
 
 ### E2E Tests Only
 
-E2E and Integration tests use [Cypress](https://www.cypress.io/).
+E2E tests use [Playwright](https://playwright.dev/).
 
-To run the Cypress tests headless, from start to finish, run:
+To run the Playwright tests headless, from start to finish, run:
 
 ```
 npm run test.e2e
 ```
 
-To open Cypress in interactive mode and control through a browser, run:
-
-```
-npm run test.e2e.open
-```
-
 ## Production Build
 
 The `npm start` command will run development builds, type check, watch unit tests, and watch the files for changes.