feat: add first-full-screen-paint in FirstChunkCache

.github/workflows/canary.yml

@@ -6,33 +6,47 @@ on:
       - release/**
 
 jobs:
+  check_changeset:
+    name: Check Changeset exists
+    outputs:
+      status: ${{ steps.check.outcome }}
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Branch
+        uses: actions/checkout@v4
+
+      - name: Check
+        id: check
+        continue-on-error: true
+        run: test "$(ls -1 .changeset | wc -l)" -gt "2"
+
   canary:
-    name: Canary
+    name: Publish Canary
     runs-on: ubuntu-latest
+    needs: check_changeset
+    if: needs.check_changeset.outputs.status == 'success'
 
     strategy:
       matrix:
         node-version: [18]
 
     steps:
       - name: Checkout Branch
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install pnpm
         uses: pnpm/action-setup@v4
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
 
       - name: Setup
         run: pnpm run setup
 
-      - name: Check changeset exists
-        run: test "$(ls -1 .changeset | wc -l)" -gt "2"
-
       - name: Config npm
         run: echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc
         env:

packages/runtime/src/Document.tsx

@@ -207,7 +207,20 @@ export const Data: DataType = (props: DataProps) => {
 export type FirstChunkCacheType = () => JSX.Element;
 
 export const FirstChunkCache: FirstChunkCacheType = () => {
-  return <div dangerouslySetInnerHTML={{ __html: '<!--fcc-->' }} />;
+  return (
+    <>
+      <script
+        dangerouslySetInnerHTML={{
+          __html: 'window.dispatchEvent(new Event("first-full-screen-paint"));',
+        }}
+      />
+      <div
+        dangerouslySetInnerHTML={{
+          __html: '<!--fcc-->',
+        }}
+      />
+    </>
+  );
 };
 
 export type MainType = (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;