Merge pull request #102 from atellmer/fix/server

atellmer · web-flow · commit 2b70cc33e9e4 · 2025-01-20T10:32:23.000+05:00
fix: correct render textarea content on the server
diff --git a/examples/server-side-rendering/backend/app.ts b/examples/server-side-rendering/backend/app.ts
@@ -1,5 +1,6 @@
 import 'module-alias/register';
 import { join } from 'node:path';
+import zlib from 'node:zlib';
 import express from 'express';
 import compression from 'compression';
 import { json } from 'body-parser';
@@ -21,12 +22,19 @@ app.use('/service-worker.js.map', express.static(join(__dirname, '../frontend/st
 createRestApi(app);
 
 app.get('*', (req, res) => {
+  const encoding = req.headers['accept-encoding'] || '';
   const { url } = req;
-  console.log('url', url);
   const stream = bootstrap({ props: { url, api } });
 
+  console.log('url', url);
   res.statusCode = 200;
-  stream.pipe(res);
+
+  if (encoding.includes('gzip')) {
+    res.setHeader('Content-Encoding', 'gzip');
+    stream.pipe(zlib.createGzip()).pipe(res);
+  } else {
+    stream.pipe(res);
+  }
 });
 
 const server = app.listen(PORT, () => {
diff --git a/examples/server-side-rendering/frontend/assets/fonts/Roboto-Bold.ttf b/examples/server-side-rendering/frontend/assets/fonts/Roboto-Bold.ttf
diff --git a/examples/server-side-rendering/frontend/assets/fonts/Roboto-Regular.ttf b/examples/server-side-rendering/frontend/assets/fonts/Roboto-Regular.ttf
diff --git a/examples/server-side-rendering/frontend/assets/fonts/Roboto-Regular.woff2 b/examples/server-side-rendering/frontend/assets/fonts/Roboto-Regular.woff2
diff --git a/examples/server-side-rendering/frontend/components/metadata.tsx b/examples/server-side-rendering/frontend/components/metadata.tsx
@@ -24,7 +24,13 @@ const Metadata = component<MetadataProps>(({ marker }) => {
       <meta name='theme-color' content='#fdd835' />
       <meta name='description' content={description} />
       <link rel='manifest' href='/static/assets/manifest.webmanifest' />
-      <link rel='preload' href='/static/assets/fonts/Roboto-Regular.ttf' _as='font' crossorigin='anonymous' />
+      <link
+        rel='preload'
+        href='/static/assets/fonts/Roboto-Regular.woff2'
+        _as='font'
+        type='font/woff2'
+        crossorigin='anonymous'
+      />
       <base href='/' />
       <title>{title}</title>
     </Metatags>
diff --git a/examples/server-side-rendering/frontend/components/ui.tsx b/examples/server-side-rendering/frontend/components/ui.tsx
@@ -18,7 +18,7 @@ const GlobalStyle = createGlobalStyle`
     font-family: 'Roboto';
     font-weight: 400;
     font-display: swap;
-    src: url('/static/assets/fonts/Roboto-Regular.ttf');
+    src: url('/static/assets/fonts/Roboto-Regular.woff2');
   }
 
   *, *::before, *::after {
diff --git a/packages/core/src/fiber/fiber.ts b/packages/core/src/fiber/fiber.ts
@@ -186,19 +186,14 @@ class Hook<T = unknown> {
   }
 
   drop() {
-    const { atoms } = this;
+    const { atoms, values, owner } = this;
 
-    if (this.values.length > 0) {
-      const $hook = this as Hook<HookValue<UseEffectValue>>;
-
-      this.owner.mask & EFFECT_HOST_MASK && dropEffects($hook);
+    if (values.length > 0 && owner.mask & EFFECT_HOST_MASK) {
+      dropEffects(this as Hook<HookValue<UseEffectValue>>);
     }
 
     if (atoms) {
-      for (const [_, cleanup] of atoms) {
-        cleanup();
-      }
-
+      for (const [_, cleanup] of atoms) cleanup();
       this.atoms = null;
     }
   }
diff --git a/packages/core/src/unmount/unmount.ts b/packages/core/src/unmount/unmount.ts
@@ -2,6 +2,7 @@ import { EFFECT_HOST_MASK, ATOM_HOST_MASK } from '../constants';
 import { removeScope, $$scope } from '../scope';
 import { detectIsUndefined } from '../utils';
 import { type Callback } from '../shared';
+import { platform } from '../platform';
 import { type Fiber } from '../fiber';
 import { walk } from '../walk';
 
@@ -19,14 +20,16 @@ function onWalk(fiber: Fiber, skip: Callback) {
   hook?.drop();
 }
 
-function unmountRoot(rootId: number, onCompleted: () => void) {
+function unmountRoot(rootId: number) {
   if (detectIsUndefined(rootId)) return;
   const $scope = $$scope(rootId);
 
-  unmountFiber($scope.getRoot());
-  $scope.off();
+  if (platform.detectIsDynamic()) {
+    unmountFiber($scope.getRoot());
+    $scope.off();
+  }
+
   removeScope(rootId);
-  onCompleted();
 }
 
 export { unmountFiber, unmountRoot };
diff --git a/packages/core/src/utils/utils.ts b/packages/core/src/utils/utils.ts
@@ -69,6 +69,8 @@ const mapRecord = <T extends object>(record: T) => keys(record).map(x => record[
 
 const createError = (x: unknown) => (x instanceof Error ? x : new Error(String(x)));
 
+const stringify = JSON.stringify as (x: unknown) => string;
+
 export {
   detectIsFunction,
   detectIsUndefined,
@@ -99,4 +101,5 @@ export {
   createIndexKey,
   mapRecord,
   createError,
+  stringify,
 };
diff --git a/packages/core/src/workloop/workloop.ts b/packages/core/src/workloop/workloop.ts
@@ -388,47 +388,54 @@ function supportConditional(inst: Instance) {
 }
 
 function commit($scope: Scope) {
+  const isStream = $scope.getIsStream();
+
   if (process.env.NODE_ENV !== 'production') {
     process.env.NODE_ENV === 'development' && $scope.setIsHot(false);
   }
 
-  const wip = $scope.getWorkInProgress();
-  const deletions = $scope.getDeletions();
-  const candidates = $scope.getCandidates();
-  const isUpdate = $scope.getIsUpdate();
-  const awaiter = $scope.getAwaiter();
-  const unmounts: Array<Fiber> = [];
-  const inst = wip.inst as Component;
-
-  // !
-  for (const fiber of deletions) {
-    const canAsync = fiber.mask & ATOM_HOST_MASK && !(fiber.mask & EFFECT_HOST_MASK);
-
-    canAsync ? unmounts.push(fiber) : unmountFiber(fiber);
-    fiber.tag = DELETE_EFFECT_TAG;
-    platform.commit(fiber);
-  }
+  if (isStream) {
+    platform.finishCommit();
+    cleanup($scope);
+  } else {
+    const wip = $scope.getWorkInProgress();
+    const deletions = $scope.getDeletions();
+    const candidates = $scope.getCandidates();
+    const isUpdate = $scope.getIsUpdate();
+    const awaiter = $scope.getAwaiter();
+    const unmounts: Array<Fiber> = [];
+    const inst = wip.inst as Component;
+
+    // !
+    for (const fiber of deletions) {
+      const canAsync = fiber.mask & ATOM_HOST_MASK && !(fiber.mask & EFFECT_HOST_MASK);
+
+      canAsync ? unmounts.push(fiber) : unmountFiber(fiber);
+      fiber.tag = DELETE_EFFECT_TAG;
+      platform.commit(fiber);
+    }
 
-  isUpdate && sync(wip);
-  $scope.runInsertionEffects();
+    isUpdate && sync(wip);
+    $scope.runInsertionEffects();
 
-  for (const fiber of candidates) {
-    const item = fiber.inst as CanHaveChildren;
+    for (const fiber of candidates) {
+      const item = fiber.inst as CanHaveChildren;
 
-    fiber.tag !== SKIP_EFFECT_TAG && platform.commit(fiber);
-    fiber.alt = null;
-    item.children && (item.children = null);
-  }
+      fiber.tag !== SKIP_EFFECT_TAG && platform.commit(fiber);
+      fiber.alt = null;
+      item.children && (item.children = null);
+    }
 
-  wip.alt = null;
-  wip.hook?.setIsWip(false);
-  inst.children = null;
-  platform.finishCommit(); // !
-  $scope.runLayoutEffects();
-  $scope.runAsyncEffects();
-  awaiter.resolve();
-  unmounts.length > 0 && setTimeout(onUnmount(unmounts));
-  cleanup($scope);
+    wip.alt = null;
+    wip.hook?.setIsWip(false);
+    inst.children = null;
+    platform.finishCommit(); // !
+    $scope.runLayoutEffects();
+    $scope.runAsyncEffects();
+    awaiter.resolve();
+    unmounts.length > 0 && setTimeout(onUnmount(unmounts));
+    cleanup($scope);
+  }
 }
 
 const onUnmount = (fibers: Array<Fiber>) => () => fibers.forEach(unmountFiber);
diff --git a/packages/data/src/use-query/use-query.ts b/packages/data/src/use-query/use-query.ts
@@ -13,15 +13,16 @@ import {
   useId,
   $$scope,
   throwThis,
+  stringify,
   __useSSR as useSSR,
   __useInSuspense as useInSuspense,
   __useInBoundary as useInBoundary,
 } from '@dark-engine/core';
 
 import { type InMemoryCache, checkCache } from '../cache';
-import { illegal, stringify } from '../utils';
 import { ROOT_ID } from '../constants';
 import { useCache } from '../client';
+import { illegal } from '../utils';
 
 export type UseQueryOptions<T, V extends Variables> = {
   variables?: V;
diff --git a/packages/data/src/utils/utils.ts b/packages/data/src/utils/utils.ts
@@ -4,6 +4,4 @@ import { LIB } from '../constants';
 
 const illegal = (x: string) => $illegal(x, LIB);
 
-const stringify = (x: unknown) => JSON.stringify(x);
-
-export { illegal, stringify };
+export { illegal };
diff --git a/packages/platform-browser/src/create-root/create-root.tsx b/packages/platform-browser/src/create-root/create-root.tsx
@@ -14,10 +14,9 @@ function createRoot(container: TagNativeElement) {
 function unmount(container: TagNativeElement) {
   const rootId = roots.get(container);
 
-  unmountRoot(rootId, () => {
-    roots.delete(container);
-    removeContent(container);
-  });
+  unmountRoot(rootId);
+  roots.delete(container);
+  removeContent(container);
 }
 
 export { createRoot, unmount };
diff --git a/packages/platform-native/src/render/render.ts b/packages/platform-native/src/render/render.ts
@@ -74,7 +74,7 @@ function render(options: RenderOptions): NSElement {
       if (detectIsFunction(onCompleted)) {
         const nativeView = getRootNativeView();
 
-        isSubRoot && unmountRoot(rootId, () => {});
+        isSubRoot && unmountRoot(rootId);
         onCompleted(nativeView);
       }
 
diff --git a/packages/platform-server/src/dom/dom.ts b/packages/platform-server/src/dom/dom.ts
@@ -9,24 +9,17 @@ import {
   ROOT,
   REF_ATTR,
   ATTR_BLACK_LIST,
-  CREATE_EFFECT_TAG,
   detectIsFunction,
   detectIsUndefined,
   NodeType,
   detectIsTagVirtualNode,
-  getFiberWithElement,
+  dummyFn,
   detectIsPlainVirtualNode,
   detectIsTextVirtualNode,
   createReplacer,
   detectIsTextBased,
 } from '@dark-engine/core';
-import {
-  type AttributeValue,
-  VALUE_ATTR,
-  TEXTAREA_TAG,
-  PREVENT,
-  detectIsVoidElement,
-} from '@dark-engine/platform-browser';
+import { type AttributeValue, VALUE_ATTR, TEXTAREA_TAG, PREVENT } from '@dark-engine/platform-browser';
 
 import { NativeElement, TagNativeElement, TextNativeElement, CommentNativeElement } from '../native-element';
 
@@ -82,28 +75,9 @@ const specialCasesMap: Record<
   },
 };
 
-function commitCreation(fiber: Fiber<NativeElement>) {
-  const parent = getFiberWithElement<NativeElement, TagNativeElement>(fiber.parent);
-  const parentElement = parent.el;
-  const vNode = parent.inst as TagVirtualNode;
-
-  !detectIsVoidElement(vNode.name) && appendNativeElement(fiber.el, parentElement);
-  detectIsTagVirtualNode(fiber.inst) && addAttributes(fiber.el, fiber.inst as TagVirtualNode);
-}
+const commit = dummyFn;
 
-function commit(fiber: Fiber<NativeElement>) {
-  switch (fiber.tag) {
-    case CREATE_EFFECT_TAG:
-      fiber.el && commitCreation(fiber);
-      break;
-    default:
-      break;
-  }
-}
-
-const finishCommit = () => {
-  chunkIds = {};
-};
+const finishCommit = () => (chunkIds = {});
 
 function createChunk(fiber: Fiber<NativeElement>) {
   let chunk = '';
diff --git a/packages/platform-server/src/native-element/native-element.ts b/packages/platform-server/src/native-element/native-element.ts
@@ -6,7 +6,6 @@ import {
   CLASS_NAME_ATTR,
   EXCLUDE_ATTR_MARK,
   TEXTAREA_TAG,
-  VALUE_ATTR,
   DANGER_HTML_ATTR,
   detectIsVoidElement,
 } from '@dark-engine/platform-browser';
@@ -56,9 +55,7 @@ class TagNativeElement extends NativeElement {
 
   override render(isOpening?: boolean) {
     const content =
-      this.name === TEXTAREA_TAG
-        ? (this.attrs[VALUE_ATTR] as string) || ''
-        : (this.attrs[DANGER_HTML_ATTR] as string) || '';
+      this.name === TEXTAREA_TAG ? this.children[0]?.render() || '' : (this.attrs[DANGER_HTML_ATTR] as string) || '';
     const isVoid = detectIsVoidElement(this.name);
     const attrs = getAttributes(this.attrs);
     const chunk = isOpening
diff --git a/packages/platform-server/src/render/render.ts b/packages/platform-server/src/render/render.ts
@@ -152,15 +152,15 @@ function renderToReadableStream(element: DarkElement, options?: RenderToStreamOp
 
     stream.push(withState());
     stream.push(null);
-    unmountRoot(rootId, dummyFn);
+    unmountRoot(rootId);
   };
 
   const onError = (err: string) => {
     const rootId = getRootId();
 
     stream.emit('error', new Error(err));
     stream.push(null);
-    unmountRoot(rootId, dummyFn);
+    unmountRoot(rootId);
   };
 
   scheduleRender({ element, onStart, onCompleted, onError });

Original file line number	Diff line number	Diff line change
@@ -18,7 +18,7 @@ const GlobalStyle = createGlobalStyle`
`18`	`18`	`font-family: 'Roboto';`
`19`	`19`	`font-weight: 400;`
`20`	`20`	`font-display: swap;`
`21`		`- src: url('/static/assets/fonts/Roboto-Regular.ttf');`
	`21`	`+ src: url('/static/assets/fonts/Roboto-Regular.woff2');`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`, ::before, *::after {`
Original file line number	Diff line number	Diff line change
`@@ -186,19 +186,14 @@ class Hook<T = unknown> {`
`186`	`186`	`}`
`187`	`187`
`188`	`188`	`drop() {`
`189`		`- const { atoms } = this;`
	`189`	`+ const { atoms, values, owner } = this;`
`190`	`190`
`191`		`- if (this.values.length > 0) {`
`192`		`- const $hook = this as Hook<HookValue<UseEffectValue>>;`
`193`		`-`
`194`		`- this.owner.mask & EFFECT_HOST_MASK && dropEffects($hook);`
	`191`	`+ if (values.length > 0 && owner.mask & EFFECT_HOST_MASK) {`
	`192`	`+ dropEffects(this as Hook<HookValue<UseEffectValue>>);`
`195`	`193`	`}`
`196`	`194`
`197`	`195`	`if (atoms) {`
`198`		`- for (const [_, cleanup] of atoms) {`
`199`		`- cleanup();`
`200`		`- }`
`201`		`-`
	`196`	`+ for (const [_, cleanup] of atoms) cleanup();`
`202`	`197`	`this.atoms = null;`
`203`	`198`	`}`
`204`	`199`	`}`