Skip to content
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.

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

feat: add support for the latest spec #126

Open
wants to merge 18 commits into
base: main
Choose a base branch
from
Open

Conversation

Lodin
Copy link
Collaborator

@Lodin Lodin commented Jun 5, 2023

Resolves #124.

This PR adds support for the latest version of the specification (Proxy(Array) instead of FrozenArray).
I have also done a refactoring to put all the code in the regular classes; they are transformed by Babel during the rollup build.
To reduce the common size, I used terser compilation, so the resulting file is minified. According to size-limit, the size of the package now is 2.67 Kb, and the overall approach looks better than before.

@Lodin Lodin requested a review from calebdwilliams June 5, 2023 18:17
@codecov-commenter
Copy link

codecov-commenter commented Jun 5, 2023

Codecov Report

Merging #126 (5830a38) into main (e6c5177) will increase coverage by 1.93%.
The diff coverage is 98.44%.

❗ Current head 5830a38 differs from pull request most recent head 4bc5d81. Consider uploading reports for the commit 4bc5d81 to get more accurate results

❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more.

@@            Coverage Diff             @@
##             main     #126      +/-   ##
==========================================
+ Coverage   92.06%   94.00%   +1.93%     
==========================================
  Files           5        6       +1     
  Lines         189      200      +11     
  Branches       32       29       -3     
==========================================
+ Hits          174      188      +14     
- Misses          4        8       +4     
+ Partials       11        4       -7     
Flag Coverage Δ
unittests 94.00% <98.44%> (+1.93%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
src/index.ts 86.66% <ø> (ø)
src/shared.ts 50.00% <ø> (-33.34%) ⬇️
src/ConstructedStyleSheet.ts 97.01% <96.55%> (+2.72%) ⬆️
src/AdoptedStyleSheetsArray.ts 100.00% <100.00%> (ø)
src/Location.ts 94.56% <100.00%> (+2.61%) ⬆️
src/utils.ts 90.90% <100.00%> (ø)

@lucsoft
Copy link

lucsoft commented Jun 14, 2023

LGTM

Except in the imports. you directing the imports to an js files, it would be way better if the imports actually link to the typescript and not some build files, as this could allow a build free use in deno.

Btw
Would be cool seeing a new release when this lands

@Lodin
Copy link
Collaborator Author

Lodin commented Jun 16, 2023

@lucsoft, you mean you'd like to have a adoptedStyleSheets.ts file alongside the built JS file?

@@ -0,0 +1,37 @@
import type ConstructedStyleSheet from './ConstructedStyleSheet.js';
import type Location from './Location.js';
import type { UnknownFunction } from './shared.js';
Copy link

Choose a reason for hiding this comment

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

kinda. you don't need to checkout the transpiled javascript files but like these imports:

Suggested change
import type { UnknownFunction } from './shared.js';
import type { UnknownFunction } from './shared.ts';

Would be cool if its 1:1 imports

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Hey, sorry, I missed your comment for some reason.

If I understand correctly, you think I'm importing transpiled JavaScript files instead of directly importing TypeScript files. However, this is not the case. The .js extension is just an ESM convention, so I'm actually referring to the .ts file even though I'm using the .js extension. Also, according to the specification, another extension besides .js is not allowed (until the import attributes proposal is accepted).

Copy link

@lucsoft lucsoft Aug 28, 2023

Choose a reason for hiding this comment

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

I'm coming from the Deno perspective, where there is no magic build folder.
so you import your file via import {} from './constants.ts' (how it actually is on the file system) (in nodejs+ts this would be done via allowImportingTsExtensions)

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I guess I got it. So all I need is to have additional adoptedStyleSheets.ts in the build folder to support Deno. I was kinda confused by your examples of my code 😅 Didn't get that it was an example.

Ok, I'll add it when I have time to fix this PR.

Copy link

Choose a reason for hiding this comment

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

no in deno you don't need a build folder i would like to just import it via the github raw cdn
so i just import the stuff form src

thats what i mean with using allowImportingTsExtensions so it actually is in the src folder correct not after the build

:D hope i made it clear

@lucsoft
Copy link

lucsoft commented Oct 2, 2023

@calebdwilliams any updates when this will land?

@calebdwilliams
Copy link
Owner

Yikes I’ve been missing emails on this. I’ll review today and push.

@calebdwilliams
Copy link
Owner

@Lodin tests seem to be failing on MacOS. Code looks mostly fine but I didn't do a deep dive due to the tests. Once that's complete, I'd be happy to merge.

@Lodin
Copy link
Collaborator Author

Lodin commented Oct 2, 2023

Thanks for the review. It's a bit hard for me to find time to finalize the PR but I'll try to do it ASAP.

@Tinhone
Copy link

Tinhone commented Aug 17, 2024

Sorry to bother. I have the same issue as #124, so I tried to build this branch.

Then, I loaded the dist in the browser. However, when I testing with document.adoptedStyleSheets.push(new CSSStyleSheet()), I encountered the error Uncaught TypeError: can't define array index property past the end of an array with non-writable length.

This is obviously not right. Did I do something wrong? Thanks in advance!

Update: Just because I set the layout.css.constructable-stylesheets.enabled to true. Sorry :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

adoptedStyleSheets#push doesn't work
5 participants