fix: hydrate in twind-v1-plugin

[y3km21]

This PR is a slightly modified version of hydrate from twind-v1-plugin (#946).

In this plugin, Cssrules of SSR are resumed by cssom() of twind.
There are demos for each of #946 and this PR. (I added a lot of classes to compare the performance.)

• feat: add twind v1 plugin #946 plugin's Demo (source)

• This PR plugin's Demo (source)

What is the issue with #946 plugin?

Twind's getSheet returns the sheet created from cssom to which resume is assigned, but since SSR's HtmlStyleSheet cannot be targeted to this sheet, resume at setup doesn't make sense.
As a result, CSSRules of ClientSide that partially overlaps with ServerSide is inserted.
Demo

I think this should be improved.

What was changed?

I made a sheet created by cssom with SSR's HtmlStyleSheet as the target, and bind the resume of the sheet created by getSheet.

export default function hydrate(options: TwindConfig) {
  const elem = document.getElementById(STYLE_ELEMENT_ID) as HTMLStyleElement;
  const sheet = cssom(elem);

  sheet.resume = getSheet().resume.bind(sheet);
  document.querySelector('[data-twind="claimed"]')?.remove();

  setup(options, sheet);
}

Demo

The resume of the sheet is working, so there is no duplication.

What about performance?

I compared the performance of each plugin on chrome.

• feat: add twind v1 plugin #946 plugin's Demo (source)

• This PR plugin's Demo (source)

The Scripting time for each is about the same.

---

Thank you very much for reading through to the end.
Please let me know if my understanding is wrong.🙏

[ry]

Thanks!

Is it possible to write a test for this fix?

[y3km21]

@ry Yes, I will do it soon!
I have a few questions about creating a test.

• Should I create a test like fresh/tests/fixture_twind-pr1050?
• Should the content of the test be such that this PR passes and feat: add twind v1 plugin #946 fails?(For example, compare stylesheets in islands)

[hashrock]

Thank you!

Should I create a test like fresh/tests/fixture_twind-pr1050?

just fresh/tests/fixture_twind is also fine!

Should the content of the test be such that this PR passes and #946 fails?(For example, compare stylesheets in islands)

Yes, it would be helpful!

[y3km21]

@hashrock Thanks!
I'll write a test.

[y3km21]

I added test!
The test contents are as follows

1. Ensure that twind compiles class in static page.
2. Ensure that twind does not cause duplication of cssrules in islands.
3. Ensure that twind compiles dynamically inserted classes in islands.

deno task test results would look like this

Test No.	#1050	#946	twind v0.16 plugin
1	✅	✅	✅
2	✅	❌	✅
3	✅	❌	✅

Please let me know if I am missing or wrong!

[ry]

Thanks for the test. I think this looks good but it could use some clean up still.

[y3km21]

@ry Thanks for the review!
I have corrected the areas you reviewed.

But there is one thing I couldn't solve.
The textDecoderStream called here leaks.

fresh/tests/twind_test.ts

Lines 23 to 25 in c4cfb20

	const lines = serverProcess.stdout
	.pipeThrough(new TextDecoderStream())
	.pipeThrough(new TextLineStream());

I have tried calling cancel() of lines and externally TextDecoderStream (ex. const decoder = TextDecoderStream();), but could't solve it.

For now, I got the textDecoder's rid from the resourceMap and manually close the resource.

fresh/tests/twind_test.ts

Lines 47 to 63 in c4cfb20

	const terminate = async () => {
	await browser.close();
	serverProcess.kill("SIGKILL");
	await serverProcess.status;
	// TextDecoder leaks, so close it manually.
	const denoResourcesMap = new Map(
	Object.entries(Deno.resources()).map(([rid, representation]) => {
	return [representation, parseInt(rid)];
	}),
	);
	const textDecoderRid = denoResourcesMap.get("textDecoder");
	if (textDecoderRid != null) {
	Deno.close(textDecoderRid);
	}
	};

Is there a correct cancel() call?
Or should I add sanitizeResources: false?

[y3km21]

Without --trace-ops, a leak occurred, so I added delay(10) before t.step.

[y3km21]

@hashrock Thanks for merging!