Skip to content

Commit 27f1163

Browse files
ViktorZhurbinbrianzinn
authored andcommitted
use Monaco editor in /playground
1 parent 983ba12 commit 27f1163

File tree

20 files changed

+4171
-4121
lines changed

20 files changed

+4171
-4121
lines changed

.github/workflows/gh-pages.yml

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ name: Deploy website to Pages
22

33
on:
44
push:
5-
branches: [master, playground-page]
5+
branches: [master]
66
paths:
77
- 'website/**'
88

@@ -21,9 +21,6 @@ jobs:
2121
# Build job
2222
build:
2323
runs-on: ubuntu-latest
24-
defaults:
25-
run:
26-
working-directory: ./website
2724
steps:
2825
- name: Checkout
2926
uses: actions/checkout@v4
@@ -38,9 +35,12 @@ jobs:
3835
uses: actions/configure-pages@v5
3936
- name: Install dependencies
4037
run: yarn install
38+
- name: Build react-babylonjs
39+
run: |
40+
yarn workspace react-babylonjs build
4141
- name: Build website
4242
run: |
43-
yarn build
43+
yarn workspace @react-babylonjs/website build
4444
- name: Upload artifact
4545
uses: actions/upload-pages-artifact@v3
4646
with:
@@ -54,8 +54,8 @@ jobs:
5454
needs: build
5555
# Grant GITHUB_TOKEN the permissions required to make a Pages deployment
5656
permissions:
57-
pages: write # to deploy to Pages
58-
id-token: write # to verify the deployment originates from an appropriate source
57+
pages: write # to deploy to Pages
58+
id-token: write # to verify the deployment originates from an appropriate source
5959
runs-on: ubuntu-latest
6060
name: Deploy
6161
steps:

package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"private": true,
44
"workspaces": {
55
"packages": [
6-
"packages/react-babylonjs"
6+
"packages/react-babylonjs",
7+
"website"
78
]
89
},
910
"scripts": {
@@ -12,7 +13,7 @@
1213
"lint": "yarn workspaces run lint",
1314
"lint:fix": "yarn workspaces run lint:fix",
1415
"prepare": "husky install",
15-
"start-docs": "cd ./website && yarn && yarn dev"
16+
"start-website": "yarn workspace @react-babylonjs/website dev"
1617
},
1718
"devDependencies": {
1819
"@parcel/packager-ts": "^2.2.0",

website/docs/playground/Template.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FC } from 'react'
1+
import React, { FC } from 'react'
22
import { Scene, Engine } from 'react-babylonjs'
33
import { Vector3 } from '@babylonjs/core/Maths/math.vector'
44

website/docs/playground/index.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
pageType: 'custom'
33
---
44

5-
<code src="./Template.tsx" fullHeight />
5+
<code src="./Template.tsx" standalone />

website/docs/public/logo.png

-97 KB
Loading

website/package.json

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,28 +21,32 @@
2121
"@babel/core": "^7.26.0",
2222
"@babel/plugin-syntax-jsx": "^7.25.9",
2323
"@babel/preset-typescript": "^7.26.0",
24-
"@babylonjs/core": "7.41.1",
25-
"@babylonjs/gui": "7.41.1",
24+
"@babylonjs/core": "^7.43.0",
25+
"@babylonjs/gui": "^7.43.0",
2626
"@babylonjs/havok": "1.3.2",
27-
"@babylonjs/loaders": "7.41.1",
28-
"@babylonjs/materials": "7.41.1",
29-
"@babylonjs/procedural-textures": "7.41.1",
30-
"babylonjs-hook": "0.1.1",
31-
"cannon": "0.6.2",
32-
"earcut": "2.2.4",
27+
"@babylonjs/loaders": "^7.43.0",
28+
"@babylonjs/materials": "^7.43.0",
29+
"@babylonjs/procedural-textures": "^7.43.0",
30+
"@monaco-editor/react": "^4.6.0",
3331
"@rollup/browser": "^4.29.1",
32+
"@shikijs/monaco": "^1.26.1",
3433
"@types/babel__standalone": "^7.1.9",
3534
"@types/node": "^18.11.17",
3635
"@types/react": "18",
3736
"@types/react-dom": "18",
37+
"babylonjs-hook": "0.1.1",
38+
"cannon": "0.6.2",
3839
"clsx": "^2.1.1",
40+
"earcut": "2.2.4",
3941
"mdast-util-from-markdown": "^2.0.2",
4042
"mdast-util-mdx": "^3.0.0",
4143
"micromark-extension-mdxjs": "^3.0.0",
44+
"monaco-editor": "^0.52.2",
4245
"prettier": "^3.4.2",
4346
"react-babylonjs": "3.2.2",
4447
"react-error-boundary": "^5.0.0",
4548
"rspack-plugin-virtual-module": "0.1.13",
49+
"shiki": "^1.26.1",
4650
"typescript": "^5.7.2",
4751
"unist-util-visit": "^5.0.0"
4852
}
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
export const _skipForTesting = (path?: string) => {
22
return false
3-
// return path ? ['playground'].every((part) => !path.includes(part)) : false
3+
// return path ? ['physics'].every((part) => !path.includes(part)) : false
44
}
Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import path from 'node:path'
2+
import fsPromises from 'node:fs/promises'
3+
4+
type TypeDirEntry = {
5+
// Root directory of the module
6+
moduleDir: string
7+
// Types directory, if different from moduleDir
8+
// Eg: '@types/react'
9+
typesDir?: string
10+
// Dist directory, if different from moduleDir
11+
distDir?: string
12+
// // Entry file, if different from index.d.ts
13+
// entry?: string
14+
// Only read these files
15+
include?: string[]
16+
}
17+
18+
const typeDirs: TypeDirEntry[] = [
19+
{
20+
moduleDir: 'react',
21+
typesDir: '@types/react',
22+
include: ['index.d.ts', 'global.d.ts'],
23+
},
24+
{
25+
moduleDir: 'react-babylonjs',
26+
// distDir: 'dist',
27+
include: ['dist/', 'package.json'],
28+
// entry: 'react-babylonjs.d.ts',
29+
},
30+
{ moduleDir: '@babylonjs/core' },
31+
{ moduleDir: '@babylonjs/gui' },
32+
]
33+
34+
// For script testing
35+
// const typesMap = await getTypeDeclarationsMap()
36+
// console.log(Object.keys(typesMap))
37+
38+
type FilePath = string
39+
type FileContent = string
40+
type TypeDeclarationsMap = Record<FilePath, FileContent>
41+
42+
/**
43+
* Builds a map of d.ts files content: `{ "path/to/index.d.ts": fileContentString }`
44+
*
45+
* Type declarations are needed for intellisense to work in MonacoEditor
46+
*/
47+
export async function getTypeDeclarationsMap(): Promise<Record<FilePath, FileContent>> {
48+
const typesMap: TypeDeclarationsMap = {}
49+
50+
for (const entry of typeDirs) {
51+
const dirTypesMap = await getDirTypeDeclarations(entry)
52+
53+
Object.assign(typesMap, dirTypesMap)
54+
}
55+
56+
return typesMap
57+
}
58+
59+
async function getDirTypeDeclarations(params: TypeDirEntry) {
60+
const filePromises = await getFilePromises(params)
61+
62+
const filePromiseResults = await Promise.allSettled(filePromises)
63+
64+
return filePromiseResults.reduce<TypeDeclarationsMap>((acc, result) => {
65+
if (result.status === 'fulfilled') {
66+
const [moduleFilePath, content] = result.value
67+
68+
acc[moduleFilePath] = content
69+
} else {
70+
console.error(result.reason)
71+
}
72+
73+
return acc
74+
}, {})
75+
}
76+
77+
async function getFilePromises(params: TypeDirEntry) {
78+
const dtsAbsolutePaths = await getDtsAbsolutePaths(params)
79+
80+
return dtsAbsolutePaths.flatMap((absolutePath) => {
81+
const moduleFilePath = prepareModulePath(absolutePath, params)
82+
83+
if (!moduleFilePath) return []
84+
85+
return fsPromises.readFile(absolutePath, 'utf8').then((content) => [moduleFilePath, content])
86+
})
87+
}
88+
89+
function prepareModulePath(absolutePath: string, params: TypeDirEntry) {
90+
// E.g.:
91+
// absolutePath = "/react-babylonjs/website/node_modules/@types/react/index.d.ts"
92+
// moduleFilePath = "@types/react/index.d.ts"
93+
let moduleFilePath = absolutePath.match(/node_modules.*/)?.[0]
94+
95+
if (!moduleFilePath) return
96+
97+
const { moduleDir, typesDir = moduleDir } = params
98+
99+
if (moduleDir !== typesDir) {
100+
// E.g.: @types/react -> react
101+
moduleFilePath = moduleFilePath.replace(typesDir, moduleDir)
102+
}
103+
104+
// if (entry && moduleFilePath === path.join(moduleDir, entry)) {
105+
// // E.g.: react-babylonjs/react-babylonjs.d.ts -> react-babylonjs/index.d.ts
106+
// // Otherwise, intellisense wouldn't figure it out, as it doesn't have access to package.json
107+
// // Can we maybe copy package.json too?
108+
// moduleFilePath = moduleFilePath.replace(entry, 'index.d.ts')
109+
// }
110+
111+
return moduleFilePath
112+
}
113+
114+
async function getDtsAbsolutePaths(params: TypeDirEntry) {
115+
try {
116+
const { moduleDir, typesDir = moduleDir, include = [] } = params
117+
118+
// grab types from the root node_modules to ensure that babylonjs and react-babylonjs types are aligned
119+
const typesDirPath = path.join(process.cwd(), '../node_modules', typesDir)
120+
121+
const entries = await fsPromises.readdir(typesDirPath, {
122+
recursive: true,
123+
withFileTypes: true,
124+
})
125+
126+
const includedPaths = include.map((includedPath) => path.join(typesDirPath, includedPath))
127+
128+
const dtsFiles = entries.flatMap((entry) => {
129+
if (!entry.isFile() || !(entry.name.endsWith('.d.ts') || entry.name === 'package.json'))
130+
return []
131+
132+
const absolutePath = path.join(entry.parentPath, entry.name)
133+
134+
if (
135+
includedPaths.length &&
136+
!includedPaths.some((includedPath) => absolutePath.includes(includedPath))
137+
) {
138+
return []
139+
}
140+
141+
return absolutePath
142+
})
143+
144+
return dtsFiles
145+
} catch (error) {
146+
console.error('Error:', error)
147+
148+
return []
149+
}
150+
}

website/src/plugins/pluginPlayground/cli/pluginPlayground.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { getFilesAndImports } from './helpers/getFilesAndImports'
1111
import { _skipForTesting } from './helpers/_skipForTesting'
1212
import { getDemoDependencies, getPackageJsonDependencies } from './helpers/getDependencies'
1313
import { getVirtualModulesCode } from './helpers/getVirtualModulesCode'
14+
import { getTypeDeclarationsMap } from './helpers/getTypeDeclarationsMap'
1415

1516
export type DemoDataByPath = Record<string, PlaygroundProps>
1617

@@ -109,6 +110,15 @@ export function pluginPlayground(): RspressPlugin {
109110
)
110111
},
111112

113+
// Add additional runtime modules
114+
async addRuntimeModules(config, isProd) {
115+
const typesMap = await getTypeDeclarationsMap()
116+
117+
return {
118+
_playground_virtual_types: `export default ${JSON.stringify(typesMap)}`,
119+
}
120+
},
121+
112122
builderConfig: {
113123
tools: {
114124
rspack: {

website/src/plugins/pluginPlayground/cli/remarkPlugin.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@ export const remarkPlugin: Plugin<[RemarkPluginProps], Root> = ({ getDemoDataByP
3636
['dependencies', JSON.stringify(dependencies)],
3737
]
3838

39-
const fullHeight = getMdxJsxAttribute(node, 'fullHeight')
40-
if (fullHeight !== undefined) {
41-
attributes.push(['fullHeight', 'true'])
39+
const standalone = getMdxJsxAttribute(node, 'standalone')
40+
if (standalone !== undefined) {
41+
attributes.push(['standalone', 'true'])
4242
}
4343

4444
Object.assign(node, {

0 commit comments

Comments
 (0)