bug: globalStyle failing HMR on Windows #4961
Assignees
Labels
Bug: Validated
This PR or Issue is verified to be a bug within Stencil
Comments
rwaskiewicz
added
the
Bug: Validated
|
@rwaskiewicz this effects both watch and regular build (it's not an HMR issue), it's a file diff problem. I am happy to raise a PR with the one line fix I linked above that resolves the issue. |
|
Hey @4leite 👋 Thanks! I'm planning on working on a fix today - turns out this bug is a little more systemic that just for |
|
(Still working on this) |
2 tasks
rwaskiewicz
added a commit
that referenced
this issue
Nov 9, 2023
this patch ensures that paths are properly normalized by the compiler.
this ensures that regardless of the platform (operating system) that a
project is compiled on, paths are uniformly treated internally by
stencil. this has system-wide reaching effects - from the in-memory
filesystem, to configuration/output target validation, and file
generation.
previously, stencil's in-browser compilation support included a polyfill
for the following NodeJS `path` module functions: `join`, `normalize`,
`relative` & `resolve`. this polyfill did the following:
- it wrapped each of the aforementioned functions in a `normalizePath`
function to convert Windows-style path separators (`\\`) to
Unix/POSIX-style path separators (`/`)
- it overwrote the standard NodeJS `path` implementations for each of
these functions.
as a result, calling `join` or any of the other three methods, even when
importing the method from `path` like below would result in the polyfill
being called:
```ts
import { join } from 'path'; // this imports the polyfilled `join`
// runs the native `path.join`, then normalizes the returned path
const filePath = join(part1, part2);
```
while this was 'nice' in that stencil engineers didn't need to think
about which implementation of `path` functions they were using, this
polyfill made some behavior of the compiler hard to understand.
the polyfills were removed in #4317 (b042d8b). this led to calls to the
aforementioned functions to call their original implementations, rather
than the wrapped implementations:
```ts
import { join } from 'path'; // imports Node's `join`
// run the native `path.join`, without any normalization
const filePath = join(part1, part2);
```
discrepencies arose where parts of the code would explicitly wrap a
call to `join()` (or one of its ilk) around a path normalization
function. this caused paths to not be uniformly normalized throughout
the codebase, leading to errors.
since the removal of in-browser compilation, additional pull requests
to fix path-related issues on windows have landed in the codebase:
- #4545 (cd58d9c)
- #4932 (b97dadc)
this commit builds on the previous commits by attempting to move
stencil's compiler completely over to polyfilled versions of the
mentioned `path` functions that are explicitly imported/called.
Some of the changes found herein were created/validated using Alice's
codemod branch, #4996
Co-authored-by: alicewriteswrongs <alicewriteswrongs@users.noreply.github.com>
STENCIL-975 Determine Scope of Path Polyfill Bug, Fix
Fixes: #4980
Fixes: #4961
Spun Off: #5036, #5032, #5029
|
@4leite Thanks for your patience! Can you do me a favor and give the following dev build of Stencil a try when you get a chance? |
github-merge-queue bot
pushed a commit
that referenced
this issue
Nov 10, 2023
* fix(compiler): normalize paths on windows
this patch ensures that paths are properly normalized by the compiler.
this ensures that regardless of the platform (operating system) that a
project is compiled on, paths are uniformly treated internally by
stencil. this has system-wide reaching effects - from the in-memory
filesystem, to configuration/output target validation, and file
generation.
previously, stencil's in-browser compilation support included a polyfill
for the following NodeJS `path` module functions: `join`, `normalize`,
`relative` & `resolve`. this polyfill did the following:
- it wrapped each of the aforementioned functions in a `normalizePath`
function to convert Windows-style path separators (`\\`) to
Unix/POSIX-style path separators (`/`)
- it overwrote the standard NodeJS `path` implementations for each of
these functions.
as a result, calling `join` or any of the other three methods, even when
importing the method from `path` like below would result in the polyfill
being called:
```ts
import { join } from 'path'; // this imports the polyfilled `join`
// runs the native `path.join`, then normalizes the returned path
const filePath = join(part1, part2);
```
while this was 'nice' in that stencil engineers didn't need to think
about which implementation of `path` functions they were using, this
polyfill made some behavior of the compiler hard to understand.
the polyfills were removed in #4317 (b042d8b). this led to calls to the
aforementioned functions to call their original implementations, rather
than the wrapped implementations:
```ts
import { join } from 'path'; // imports Node's `join`
// run the native `path.join`, without any normalization
const filePath = join(part1, part2);
```
discrepencies arose where parts of the code would explicitly wrap a
call to `join()` (or one of its ilk) around a path normalization
function. this caused paths to not be uniformly normalized throughout
the codebase, leading to errors.
since the removal of in-browser compilation, additional pull requests
to fix path-related issues on windows have landed in the codebase:
- #4545 (cd58d9c)
- #4932 (b97dadc)
this commit builds on the previous commits by attempting to move
stencil's compiler completely over to polyfilled versions of the
mentioned `path` functions that are explicitly imported/called.
Some of the changes found herein were created/validated using Alice's
codemod branch, #4996
Co-authored-by: alicewriteswrongs <alicewriteswrongs@users.noreply.github.com>
STENCIL-975 Determine Scope of Path Polyfill Bug, Fix
Fixes: #4980
Fixes: #4961
Spun Off: #5036, #5032, #5029
* fix validate-dist-collection tests
* fix prerendered-write-path test
* fix stencil-types tests
this commit removes a spy on `join.resolve` and updates the mocks to
properly spy on the wrapped `@utils`' `resolve` fn
* fix validate-paths tests
this commit updates the tests for `validate-paths`. it replaces
instances of `path.join` in assertions with stencil's own `join`
function. existing instances of `path.join` have been left as-is if they
pertain to user input. this allows us to exercise a user using either
path separator in CI (which runs in windows and linux).
the cache directory is now normalized if it is absolute. otherwise,
provided cache directories in `stencil.config.ts` would never get
normalized
* fix validate-output-www tests
this commit updates the tests for `validate-paths`. it replaces
instances of `path.join` in assertions with stencil's own `join`
function. existing instances of `path.join` have been left as-is if they
pertain to user input. this allows us to exercise a user using either
path separator in CI (which runs in windows and linux).
* fix validate-output-dist tests
this commit updates the tests for `validate-output`. it replaces
instances of `path.join` in assertions with stencil's own `join`
function. existing instances of `path.join` have been left as-is if they
pertain to user input. this allows us to exercise a user using either
path separator in CI (which runs in windows and linux).
this commit also switches `output-target.ts#getcomponentsDtsSrcFilePath`
over to use Stencil's join function to fix the tests
* fix validate-output-dist-custom-element tests
this commit updates the tests for `validate-output-dist-custom-element`.
it replaces instances of `path.join` in assertions with stencil's own `join
function. existing instances of `path.join` have been left as-is if they
pertain to user input. this allows us to exercise a user using either
path separator in CI (which runs in windows and linux).
* fix validate-testing tests
this commit updates the tests for `validate-testing`. it replaces
instances of `path.join` in assertions with stencil's own `join`
function. existing instances of `path.join` have been left as-is if they
pertain to user input. this allows us to exercise a user using either
path separator in CI (which runs in windows and linux).
the screenshot connector is now normalized if it is absolute. otherwise,
provided connector file path in `stencil.config.ts` would never get
normalized
|
The fix for this went out as a part of today's v4.7.2 release! |
|
@tanner-reits Sorry took a while to get back on this project. I can confirm that this is resolved for ours with release v4.7.2. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Prerequisites
Stencil Version
4.5.0
Current Behavior
Stencil in watch mode does not rebuild when config.globalStyle is updated on windows.
Expected Behavior
Changing config.globalStyle should trigger a rebuild.
System Info
Steps to Reproduce
npm run start
make a change to /src/global.css eg change "--color-primary: red;" to blue.
change is not reflected in browser.
Code Reproduction URL
https://github.com/Datacom-Digital/stencil-bug
Additional Information
This is because buildCtx.filesChanged is normalised but config.globalStyle is not so the string compare fails. This is probably effecting imports as well however i don't use them in my project so haven't checked.
See #4898 for the patch that fixed the issue for me.
The text was updated successfully, but these errors were encountered: