chore: upgrade to React 19, yarn 4, Cesium 1.126.0 and TS

.github/workflows/ci.yml

@@ -1,74 +1,100 @@
 name: ci
+
 on:
   push:
     branches:
       - main
   pull_request:
+
 jobs:
   ci:
     name: CI
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/setup-node@v3
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
           node-version: lts/*
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v3
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      # Yarn 4 uses .yarn/cache instead of a global cache directory
+      - name: Cache Yarn dependencies
+        uses: actions/cache@v4
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          path: |
+            .yarn/cache
+            .yarn/unplugged
+            .yarn/install-state.gz
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-      - name: Install
-        run: yarn install --frozen-lockfile
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
       - name: Lint
         run: yarn run lint
+
       - name: Test
         run: yarn run test
+
       - name: Codecov
         uses: codecov/codecov-action@v3
+
       - name: Build
         run: yarn run build
+
       - name: Upload artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: dist
           path: dist/**/*
+
   docs:
     name: Build docs
     runs-on: ubuntu-latest
     needs: ci
     if: ${{ github.event_name == 'push' }}
     steps:
-      - uses: actions/setup-node@v3
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
           node-version: lts/*
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v3
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Cache Yarn dependencies
+        uses: actions/cache@v4
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          path: |
+            .yarn/cache
+            .yarn/unplugged
+            .yarn/install-state.gz
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-      - name: Install
-        run: yarn install --frozen-lockfile
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
       - name: Install Docs
-        run: (cd docs && yarn install --frozen-lockfile)
+        run: (cd docs && yarn install --immutable)
+
       - name: Build docs
         run: yarn run docs:build
+
       - name: Deploy docs
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./docs/build
-          cname: resium.reearth.io
+          cname: resium.reearth.io

.gitignore

@@ -5,3 +5,12 @@ node_modules
 /examples/build
 /example/package-lock.json
 /example/yarn.lock
+
+# yarn 4
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -40,40 +40,44 @@
   },
   "peerDependencies": {
     "cesium": "1.x",
-    "react": ">=18.2.0",
-    "react-dom": ">=18.2.0"
+    "react": ">=18.2.0 <20",
+    "react-dom": ">=18.2.0 <20"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "8.0.5",
-    "@storybook/addon-storysource": "8.0.5",
-    "@storybook/addons": "7.6.17",
-    "@storybook/builder-vite": "8.0.5",
-    "@storybook/react": "8.0.5",
-    "@storybook/react-vite": "8.0.5",
-    "@storybook/theming": "8.0.5",
-    "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "14.2.2",
-    "@types/node": "20.12.2",
-    "@types/react": "18.2.73",
-    "@vitejs/plugin-react": "4.2.1",
-    "c8": "9.1.0",
-    "cesium": "1.116.0",
+    "@storybook/addon-essentials": "8.5.3",
+    "@storybook/addon-storysource": "8.5.3",
+    "@storybook/addons": "7.6.20",
+    "@storybook/builder-vite": "8.5.3",
+    "@storybook/react": "8.5.3",
+    "@storybook/react-vite": "8.5.3",
+    "@storybook/theming": "8.5.3",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.2.0",
+    "@types/jsdom": "21.1.7",
+    "@types/node": "22.13.1",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "4.3.4",
+    "c8": "10.1.3",
+    "cesium": "1.126.0",
     "eslint": "8.57.0",
     "eslint-config-reearth": "0.3.0",
     "globby": "14.0.1",
-    "jsdom": "24.0.0",
-    "npm-run-all2": "5.0.0",
+    "jsdom": "26.0.0",
+    "npm-run-all2": "7.0.2",
     "prettier": "3.2.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "storybook": "8.0.5",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "storybook": "8.5.3",
     "ts-expect": "1.3.0",
     "ts-node": "10.9.2",
     "typescript": "5.4.3",
-    "vite": "5.2.7",
-    "vite-plugin-cesium": "1.2.22",
-    "vite-plugin-dts": "3.8.1",
-    "vitest": "1.4.0",
+    "vite": "6.1.0",
+    "vite-plugin-cesium": "1.2.23",
+    "vite-plugin-dts": "4.5.0",
+    "vitest": "3.0.5",
     "web-streams-polyfill": "4.0.0"
-  }
+  },
+  "packageManager": "[email protected]"
 }

src/Billboard/Billboard.ts

@@ -37,6 +37,7 @@ const cesiumProps = [
   "horizontalOrigin",
   "image",
   "pixelOffset",
+  "splitDirection",
   "pixelOffsetScaleByDistance",
   "position",
   "rotation",

src/BillboardGraphics/BillboardGraphics.ts

@@ -34,6 +34,7 @@ const cesiumProps = [
   "pixelOffset",
   "rotation",
   "alignedAxis",
+  "splitDirection",
   "width",
   "height",
   "color",

src/Cesium3DTileset/Cesium3DTileset.ts

@@ -81,6 +81,7 @@ const cesiumProps = [
   "immediatelyLoadDesiredLevelOfDetail",
   "loadSiblings",
   "clippingPlanes",
+  "clippingPolygons",
   "classificationType",
   "ellipsoid",
   "lightColor",
@@ -118,6 +119,7 @@ const cesiumReadonlyProps = [
   "cullWithChildrenBounds",
   "debugHeatmapTilePropertyName",
   "enableDebugWireframe",
+  "environmentMapOptions",
   "modelUpAxis",
   "modelForwardAxis",
   "projectTo2D",

src/CesiumWidget/CesiumWidget.ts

@@ -76,6 +76,14 @@ const cesiumReadonlyProps = [
   "creditViewport",
   "shadows",
   "terrainShadows",
+  "ellipsoid",
+  "dataSources",
+  "allowDataSourcesToSuspendAnimation",
+  "trackedEntity",
+  "trackedEntityChanged",
+  "clockTrackedDataSource",
+  "shouldAnimate",
+  "automaticallyTrackDataSourceClocks",
   "terrain",
   "requestRenderMode",
   "maximumRenderTimeChange",

src/Entity/Entity.ts

@@ -109,6 +109,7 @@ const cesiumProps = [
   "label",
   "model",
   "name",
+  "trackingReferenceFrame",
   "orientation",
   "path",
   "plane",

src/Fog/Fog.ts

@@ -23,6 +23,10 @@ const cesiumProps = [
   "enabled",
   "minimumBrightness",
   "screenSpaceErrorFactor",
+  "heightScalar",
+  "maxHeight",
+  "visualDensityScalar",
+  "heightFalloff",
   "renderable",
 ] as const;
 

src/Globe/Globe.ts

@@ -68,6 +68,7 @@ const cesiumProps = [
   "backFaceCulling",
   "baseColor",
   "clippingPlanes",
+  "clippingPolygons",
   "depthTestAgainstTerrain",
   "enableLighting",
   "lightingFadeInDistance",

src/Model/Model.ts

@@ -41,6 +41,7 @@ const cesiumProps = [
   "maximumScale",
   "minimumPixelSize",
   "modelMatrix",
+  "clippingPolygons",
   "outlineColor",
   "scale",
   "shadows",
@@ -66,6 +67,8 @@ const cesiumReadonlyProps = [
   "releaseGltfJson",
   "cull",
   "opaquePass",
+  "enableVerticalExaggeration",
+  "environmentMapOptions",
   "upAxis",
   "forwardAxis",
   "content",

src/ModelGraphics/ModelGraphics.ts

@@ -33,6 +33,8 @@ const cesiumProps = [
   "runAnimations",
   "clampAnimations",
   "nodeTransformations",
+  "environmentMapOptions",
+  "enableVerticalExaggeration",
   "shadows",
   "heightReference",
   "distanceDisplayCondition",

src/PointGraphics/PointGraphics.ts

@@ -32,6 +32,7 @@ const cesiumProps = [
   "scaleByDistance",
   "translucencyByDistance",
   "heightReference",
+  "splitDirection",
   "distanceDisplayCondition",
   "disableDepthTestDistance",
 ] as const;

src/PointPrimitive/PointPrimitive.ts

@@ -32,6 +32,7 @@ const cesiumProps = [
   "distanceDisplayCondition",
   "id",
   "outlineColor",
+  "splitDirection",
   "outlineWidth",
   "pixelSize",
   "position",

src/ScreenSpaceCameraController/ScreenSpaceCameraController.ts

@@ -30,6 +30,8 @@ const cesiumProps = [
   "enableTilt",
   "enableTranslate",
   "enableZoom",
+  "zoomFactor",
+  "maximumTiltAngle",
   "inertiaSpin",
   "inertiaTranslate",
   "inertiaZoom",

src/Viewer/Viewer.ts

@@ -46,6 +46,7 @@ const cesiumProps = [
   "resolutionScale",
   "allowDataSourcesToSuspendAnimation",
   "trackedEntity",
+  "ellipsoid",
   "selectedEntity",
   "shadows",
   "useBrowserRecommendedResolution",

src/core/CameraOperation.ts

@@ -15,7 +15,7 @@ export const createCameraOperation = <P>(
   /* eslint-disable react-hooks/rules-of-hooks */
   const component: FC<P & CameraOperationProps> = props => {
     const ctx = useCesium();
-    const prevProps = useRef<P>();
+    const prevProps = useRef<P | undefined>(undefined);
     const first = useRef(false);
 
     useEffect(() => {

src/core/component.tsx

@@ -47,11 +47,15 @@ export const createCesiumComponent = <Element, Props extends {}, State = any>({
   defaultProps,
   ...options
 }: CesiumComponentOptions<Element, Props, State>): CesiumComponentType<Element, Props> => {
-  const component: ForwardRefRenderFunction<CesiumComponentRef<Element>, Props> = (props, ref) => {
+  const component: ForwardRefRenderFunction<CesiumComponentRef<Element>, PropsWithoutRef<Props>> = (
+    props,
+    ref,
+  ) => {
     const mergedProps = {
       ...defaultProps,
       ...props,
-    };
+    } as Props;
+
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [provided, mounted, wrapperRef] = useCesiumComponent<Element, Props, State>(
       options,
@@ -66,6 +70,7 @@ export const createCesiumComponent = <Element, Props extends {}, State = any>({
         ? (mergedProps as PropsWithChildren<Props>).children
         : null
       : null;
+
     const wrappedChildren = renderContainer ? (
       <div
         data-testid="resium-container"
@@ -87,5 +92,5 @@ export const createCesiumComponent = <Element, Props extends {}, State = any>({
 
   component.displayName = options.name;
 
-  return forwardRef(component);
+  return forwardRef<CesiumComponentRef<Element>, Props>(component);
 };