docs(project): update documentation and project setup

create-app.js

@@ -24,7 +24,7 @@ cpSync('logo.png', 'app/logo.png')
 rmSync(appTemp, { recursive: true })
 
 // Run build to ensure distributed files for plugin exist.
-execSync('npm run build', {
+execSync('bun run build', {
   stdio: 'inherit',
 })
 
@@ -35,7 +35,7 @@ execSync('npm install $(npm pack .. | tail -1)', {
 })
 
 // Additional dependency.
-execSync('npm install react-native-cols mobx', {
+execSync('bun install react-native-cols mobx', {
   cwd: join(process.cwd(), 'app'),
   stdio: 'inherit',
 })

documentation/markup/Repl.js

@@ -87,21 +87,15 @@ const SandpackInner = ({ phone, setPhone }) => {
     const phone = deviceSizes[selected.value]
 
     Object.values(sandpack.clients).forEach((client) => {
-      client.iframe.contentWindow.postMessage(
-        { type: 'width', width: phone.width / phone.scale },
-        '*'
-      )
+      client.iframe.contentWindow.postMessage({ type: 'width', width: phone.width / phone.scale }, '*')
     })
 
     setPhone(phone)
   })
 
   useEffect(() => {
     Object.values(sandpack.clients).forEach((client) => {
-      client.iframe.contentWindow.postMessage(
-        { type: 'width', width: phone.width / phone.scale },
-        '*'
-      )
+      client.iframe.contentWindow.postMessage({ type: 'width', width: phone.width / phone.scale }, '*')
     })
   }, [sandpack])
 
@@ -141,11 +135,7 @@ const SandpackInner = ({ phone, setPhone }) => {
             }),
             option: (provided, state) => ({
               ...provided,
-              backgroundColor: state.isSelected
-                ? '#82D9FF'
-                : state.isFocused
-                ? '#FF85FA'
-                : 'transparent',
+              backgroundColor: state.isSelected ? '#82D9FF' : state.isFocused ? '#FF85FA' : 'transparent',
               cursor: 'pointer',
               ':active': {
                 backgroundColor: '#FF85FA',
@@ -176,7 +166,7 @@ const SandpackInner = ({ phone, setPhone }) => {
 }
 
 export const Repl = () => {
-  const [phone, setPhone] = useState(deviceSizes['iphone14'])
+  const [phone, setPhone] = useState(deviceSizes['iphone15'])
 
   return (
     <ContentGrid size={phone.type === Type.Tablet ? 'ultrawide' : 'wide'}>

documentation/package.json

@@ -7,15 +7,15 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "^2.11.2",
+    "@codesandbox/sandpack-react": "^2.14.2",
     "@stitches/react": "^1.2.8",
-    "device-sizes": "^1.2.3",
-    "indicate": "^6.2.0",
+    "device-sizes": "^1.2.4",
+    "indicate": "^6.3.0",
     "next": "14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-select": "^5.8.0",
-    "wasser": "^2.4.0"
+    "wasser": "^2.6.0"
   },
   "devDependencies": {
     "eslint": "8.56.0",

package.json

@@ -6,13 +6,13 @@
   "license": "MIT",
   "author": "Matthias Giger",
   "scripts": {
-    "app": "node create-app.js",
+    "app": "bun create-app.js",
     "app:install": "npm i --no-save $(npm pack . | tail -1) --prefix app",
     "build": "esbuild index.ts --outdir=dist --bundle --format=esm --platform=neutral --sourcemap --external:react-native --external:react --external:mobx && tsc",
     "watch": "npm-run-all --parallel build:watch copy",
     "copy": "cpx 'dist/**/*' app/node_modules/responsive-react-native/dist --watch",
     "build:watch": "esbuild index.ts --watch --outdir=dist --bundle --format=esm --platform=neutral --sourcemap --external:react-native --external:react --external:mobx",
-    "test": "jest && npm run test:types",
+    "test": "jest && bun run test:types",
     "test:types": "cd test && tsc && cd types && tsc",
     "test:watch": "jest --watchAll",
     "lint": "eslint . --fix --ext .js,.jsx,.ts,.tsx",