Skip to content

revert: css-only hydration to prevent FOUC #4916

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jcfranco merged 1 commit into from
Jul 13, 2022
Merged

revert: css-only hydration to prevent FOUC #4916

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ node_modules/
support/output-targets/custom-elements/bundles/
src/**/components.d.ts
src/**/*.js
src/assets/styles/_hydration.scss
Copy link
Copy Markdown
Member

@driskull driskull Jul 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can just comment all this stuff out until its ready?

Copy link
Copy Markdown
Member Author

@jcfranco jcfranco Jul 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd rather remove the code. Restoring this should be as simple as re-reverting (verting? 😂) the commit.

__docs-temp__/*

# User Settings, Caches & Temp Files
Expand Down
11 changes: 5 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
"hydrate/"
],
"scripts": {
"build": "npm run util:hydration-styles && npm run util:copy-icons && stencil build && npm run util:patch-es5-helpers",
"build:watch": "npm run util:hydration-styles && npm run util:copy-icons && stencil build --watch",
"build:watch-dev": "npm run util:hydration-styles && npm run util:copy-icons && stencil build --dev --watch",
"build": "npm run util:copy-icons && stencil build && npm run util:patch-es5-helpers",
"build:watch": "npm run util:copy-icons && stencil build --watch",
"build:watch-dev": "npm run util:copy-icons && stencil build --dev --watch",
"deps:update": "updtr --exclude chalk cheerio typescript @types/jest jest jest-cli ts-jest puppeteer && npm audit fix",
"docs": "concurrently --kill-others --raw \"npm:util:build-docs && build-storybook --output-dir ./docs\" \"ts-node ./support/cleanOnProcessExit.ts --path ./__docs-temp__\"",
"docs:preview": "concurrently --raw \"npm:util:build-docs && start-storybook\" \"ts-node ./support/cleanOnProcessExit.ts --path ./__docs-temp__\"",
Expand All @@ -42,18 +42,17 @@
"test:prerender": "stencil build --no-docs --prerender",
"test:storybook": "concurrently --raw \"npm:util:build-docs && screener-storybook --conf screener.config.js\"",
"test:watch": "npm run util:run-tests -- --watchAll",
"util:build-docs": "npm run util:hydration-styles && npm run util:copy-icons && stencil build --config stencil.storybook.config.ts",
"util:build-docs": "npm run util:copy-icons && stencil build --config stencil.storybook.config.ts",
"util:clean-tested-build": "npm ci && npm test && npm run build",
"util:copy-icons": "cpy \"./node_modules/@esri/calcite-ui-icons/js/*.json\" \"./src/components/icon/assets/icon/\" --flat",
"util:deploy-next": "npm run util:prep-next && npm run util:push-tags && npm run util:publish-next",
"util:deploy-next-from-ci": "ts-node --project ./tsconfig-node-scripts.json support/deployNextFromCI.ts",
"util:hydration-styles": "ts-node support/hydrationStyles.ts",
"util:patch-es5-helpers": "ts-node support/patchES5Helpers.ts",
"util:prep-next": "ts-node --project ./tsconfig-node-scripts.json support/prepReleaseCommit.ts --next && npm run build",
"util:publish-next": "npm publish --tag next",
"util:check-squash-mergeable-branch": "ts-node --project ./tsconfig-node-scripts.json support/checkSquashMergeableBranch.ts",
"util:push-tags": "git push --atomic --follow-tags origin master",
"util:run-tests": "npm run util:hydration-styles && npm run util:copy-icons && stencil test --no-docs --spec --e2e"
"util:run-tests": "npm run util:copy-icons && stencil test --no-docs --spec --e2e"
},
"repository": {
"type": "git",
Expand Down
3 changes: 0 additions & 3 deletions src/assets/styles/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@
/* CSS vars (@include in global) */
@import "type";

/* Hydration styles to hide non-hydrated components */
Copy link
Copy Markdown
Member

@driskull driskull Jul 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can just comment this out for now?

@import "hydration";

@mixin calcite-theme-light-extended {
@include calcite-theme-light();
--calcite-theme-name: "light";
Expand Down
1 change: 0 additions & 1 deletion stencil.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,6 @@ export const create: () => Config = () => ({
}
}
],
invisiblePrehydration: false,
globalStyle: "src/assets/styles/global.scss",
plugins: [
sass({
Expand Down
33 changes: 0 additions & 33 deletions support/hydrationStyles.ts
View file
Open in desktop

This file was deleted.