feat(vite-plugin-angular): add support for JIT mode #374

brandonroberts · 2023-05-05T21:04:42Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/analogjs/analog/blob/main/CONTRIBUTING.md#-commit-message-guidelines
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

Which package are you modifying?

What is the current behavior?

Closes #368

What is the new behavior?

Enabling JIT mode through the Analog Platform and Vite Angular Plugin is an option.

/// <reference types="vitest" />

import { defineConfig } from 'vite';
import { offsetFromRoot } from '@nx/devkit';
import angular from '@analogjs/vite-plugin-angular';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  return {
    root: 'src',
    plugins: [
      angular({ jit: boolean }), // enabled automatically when running tests with Vitest
    ],
    test: {
      globals: true,
      environment: 'jsdom',
      setupFiles: ['src/test-setup.ts'],
      include: ['**/*.spec.ts'],
    },
    define: {
      'import.meta.vitest': mode !== 'production',
    },
  };
});

When running tests, JIT mode is used instead of AOT which provides faster compilation of files, while still supporting internal and external styles and templates. This will speed up compilation time with libraries such as Vitest, Playwright, Storybook, etc.

Does this PR introduce a breaking change?

Yes
No

Other information

netlify · 2023-05-05T21:04:48Z

✅ Deploy Preview for analog-blog ready!

Name	Link
🔨 Latest commit	`5e758c9`
🔍 Latest deploy log	https://app.netlify.com/sites/analog-blog/deploys/645a3df36f05640007fff125
😎 Deploy Preview	https://deploy-preview-374--analog-blog.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify · 2023-05-05T21:04:49Z

✅ Deploy Preview for analog-docs ready!

Name	Link
🔨 Latest commit	`5e758c9`
🔍 Latest deploy log	https://app.netlify.com/sites/analog-docs/deploys/645a3df35a03850008e2aeb4
😎 Deploy Preview	https://deploy-preview-374--analog-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify · 2023-05-05T21:04:50Z

✅ Deploy Preview for analog-app ready!

Name	Link
🔨 Latest commit	`5e758c9`
🔍 Latest deploy log	https://app.netlify.com/sites/analog-app/deploys/645a3df35a03850008e2aeaf
😎 Deploy Preview	https://deploy-preview-374--analog-app.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

brandonroberts · 2023-05-06T02:34:59Z

@sand4rt this should help with Playwright compilation speed also.

sand4rt · 2023-05-06T08:41:19Z

@brandonroberts Awesome! Gonna try this asap!

yharaskrik · 2023-05-07T14:21:00Z

packages/platform/src/lib/platform-plugin.ts

@@ -31,6 +31,6 @@ export function platformPlugin(opts: Options = {}): Plugin[] {
    (platformOptions.ssr
      ? devServerPlugin({ entryServer: opts.entryServer })
      : false) as Plugin,
-    ...angular(opts?.vite),
+    ...angular({ jit: platformOptions.jit, ...opts?.vite }),


If opts?.vite ends up being undefined this spread will error. I think you want ...(opts?.vite ?? {})?

Good catch, thanks

gergobergo · 2023-05-08T13:40:08Z

packages/vite-plugin-angular/src/lib/angular-build-optimizer-plugin.ts

+        });
+
+        return {
+          code: result?.code || '',


minor (non-blocking): Wouldn't make sense to use the ?? instead of || here?

gergobergo · 2023-05-08T13:55:55Z

packages/vite-plugin-angular/src/lib/angular-jit-plugin.ts

+}: {
+  inlineStylesExtension: string;
+}): Plugin {
+  let styleTransform: PluginContainer['transform'] | undefined;


suggestion: if we have a utils library/functions somewhere we could add a Utility type like this:
type ExtractMethodSignature<T extends Record<any, any>, K> = T[K];

and this way you can change this to:
let styleTransform: ExtractMethodSignature<PluginContainer, 'transform'> | undefined;

This would make only sense if we do this many times in our code. Maybe there is a better TS solution for this.

@gergobergo the correct TS solution is already being used. There's no point in abstracting something that doesn't need to be abstracted.

sand4rt · 2023-05-09T17:52:39Z

@brandonroberts thought the templateUrl would still work with angular({ jit: true }) somehow but unfortunately that is not the case. I wonder if this is still a useful feature for testing because of this?

brandonroberts · 2023-05-09T18:35:34Z

@sand4rt it supports templateUrl and styleUrls with Vitests. I'll have to check and see what the issue is with Playwright. Will you open a new issue with a sample repo?

KlausEverWalkingDev · 2023-05-11T13:10:15Z

After running some tests I came with these weirdly conclusions:

brandonroberts · 2023-05-11T16:20:15Z

@KlausEverWalkingDev this is the same as disabling jit mode altogether. The vite object overrides the analog plugin options for the Vite plugin.

KlausEverWalkingDev · 2023-05-11T16:57:52Z

Oh, thanks. I added it while reading the analog source files, but I admit I didn't understand the real meaning of it. By the way, what's the difference between analog and angular plugin? I didn't get when to use only one of them or both.

brandonroberts · 2023-05-11T17:10:36Z

Oh, thanks. I added it while reading the analog source files, but I admit I didn't understand the real meaning of it. By the way, what's the difference between analog and angular plugin? I didn't get when to use only one of them or both.

The analog plugin is the "glue" between the analog packages.

The angular plugin is what handles connecting Angular compilation to Vite. It can be used on its own and is used for Astro, Qwik, and other Vite integration

…ogjs#374)

yharaskrik reviewed May 7, 2023

View reviewed changes

goetzrobin approved these changes May 8, 2023

View reviewed changes

brandonroberts force-pushed the feat-jit-mode branch from 9b90608 to 7f9e0d6 Compare May 8, 2023 13:39

gergobergo reviewed May 8, 2023

View reviewed changes

gergobergo approved these changes May 8, 2023

View reviewed changes

brandonroberts added 8 commits May 8, 2023 21:51

feat: add support for JIT mode

e47e280

chore: use vite plugin with library tests

cf4b3f5

chore: cleanup

0d01cea

chore: review fixes

6a70158

chore: disable transpilation with esbuild in JIT mode

c1277ea

chore: refactor plugins into separate files

4711be0

fix: add style transform to jit plugin

5f38011

fix: skip jit during prod build

5e758c9

brandonroberts force-pushed the feat-jit-mode branch from 7f9e0d6 to 5e758c9 Compare May 9, 2023 12:34

brandonroberts merged commit 07af493 into main May 9, 2023
18 checks passed

brandonroberts deleted the feat-jit-mode branch May 9, 2023 12:58

sand4rt mentioned this pull request May 10, 2023

"default" is not exported by "virtual:angular:jit:template:file;button.component.html #383

Closed

2 tasks

Villanuevand pushed a commit to Villanuevand/analog that referenced this pull request Sep 12, 2023

feat(vite-plugin-angular): add support for JIT mode for testing (anal…

01ffbf8

…ogjs#374)

sand4rt mentioned this pull request Oct 24, 2023

feat(ct): angular component testing microsoft/playwright#27783

Open

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(vite-plugin-angular): add support for JIT mode #374

feat(vite-plugin-angular): add support for JIT mode #374

brandonroberts commented May 5, 2023 •

edited

netlify bot commented May 5, 2023 •

edited

netlify bot commented May 5, 2023 •

edited

netlify bot commented May 5, 2023 •

edited

brandonroberts commented May 6, 2023

sand4rt commented May 6, 2023 •

edited

yharaskrik May 7, 2023

brandonroberts May 7, 2023

gergobergo May 8, 2023

gergobergo May 8, 2023

marcus-sa May 9, 2023 •

edited

sand4rt commented May 9, 2023

brandonroberts commented May 9, 2023

KlausEverWalkingDev commented May 11, 2023 •

edited

brandonroberts commented May 11, 2023

KlausEverWalkingDev commented May 11, 2023 •

edited

brandonroberts commented May 11, 2023

feat(vite-plugin-angular): add support for JIT mode #374

feat(vite-plugin-angular): add support for JIT mode #374

Conversation

brandonroberts commented May 5, 2023 • edited

PR Checklist

PR Type

Which package are you modifying?

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

netlify bot commented May 5, 2023 • edited

✅ Deploy Preview for analog-blog ready!

netlify bot commented May 5, 2023 • edited

✅ Deploy Preview for analog-docs ready!

netlify bot commented May 5, 2023 • edited

✅ Deploy Preview for analog-app ready!

brandonroberts commented May 6, 2023

sand4rt commented May 6, 2023 • edited

yharaskrik May 7, 2023

Choose a reason for hiding this comment

brandonroberts May 7, 2023

Choose a reason for hiding this comment

gergobergo May 8, 2023

Choose a reason for hiding this comment

gergobergo May 8, 2023

Choose a reason for hiding this comment

marcus-sa May 9, 2023 • edited

Choose a reason for hiding this comment

sand4rt commented May 9, 2023

brandonroberts commented May 9, 2023

KlausEverWalkingDev commented May 11, 2023 • edited

brandonroberts commented May 11, 2023

KlausEverWalkingDev commented May 11, 2023 • edited

brandonroberts commented May 11, 2023

brandonroberts commented May 5, 2023 •

edited

netlify bot commented May 5, 2023 •

edited

netlify bot commented May 5, 2023 •

edited

netlify bot commented May 5, 2023 •

edited

sand4rt commented May 6, 2023 •

edited

marcus-sa May 9, 2023 •

edited

KlausEverWalkingDev commented May 11, 2023 •

edited

KlausEverWalkingDev commented May 11, 2023 •

edited