Make Live editor auto-complete WebGPU types

Gruntfile.js

@@ -12,6 +12,7 @@ const path = require('path');
 const liveEditor = require('@gfxfundamentals/live-editor');
 const fixLinks = require('./build/fix-links.js');
 const liveEditorPath = path.dirname(require.resolve('@gfxfundamentals/live-editor'));
+const webgpuTypesPath = path.join(__dirname, 'node_modules', '@webgpu', 'types');
 
 module.exports = function(grunt) {
 
@@ -63,6 +64,7 @@ module.exports = function(grunt) {
           { expand: false, src: '*', dest: 'out/', filter: noMdsNoFolders, },
           { expand: true, cwd: `${liveEditor.monacoEditor}/`, src: 'min/**', dest: 'out/monaco-editor/', nonull: true, },
           { expand: true, cwd: `${liveEditorPath}/src/`, src: '**', dest: 'out/webgpu/resources/', nonull: true, },
+          { expand: true, cwd: `${webgpuTypesPath}/`, src: 'dist/**', dest: 'out/types/webgpu/', nonull: true, },
           { expand: true, src: 'webgpu/**', dest: 'out/', filter: noMds, },
           { expand: true, src: '3rdparty/**', dest: 'out/', },
         ],

package.json

@@ -5,13 +5,13 @@
   "main": "index.js",
   "devDependencies": {
     "@gfxfundamentals/lesson-builder": "github:gfxfundamentals/lesson-builder#v2.2.0",
-    "@gfxfundamentals/live-editor": "github:gfxfundamentals/live-editor#v1.4.0",
+    "@gfxfundamentals/live-editor": "github:gfxfundamentals/live-editor#v1.5.1",
     "@types/estree": "^1.0.0",
     "@types/jsdom": "^21.1.1",
     "@typescript-eslint/eslint-plugin": "^5.56.0",
     "@typescript-eslint/parser": "^5.56.0",
     "@typescript-eslint/typescript-estree": "^5.56.0",
-    "@webgpu/types": "^0.1.30",
+    "@webgpu/types": "^0.1.34",
     "eslint": "^8.36.0",
     "eslint-plugin-google-camelcase": "0.0.2",
     "eslint-plugin-html": "^7.1.0",

webgpu/resources/editor-settings.js

@@ -38,6 +38,22 @@ function removeDotDotSlash(url) {
   return newUrl;
 }
 
+async function getText(url) {
+  const req = await fetch(url);
+  return await req.text();
+}
+
+async function initEditor() {
+  /* global monaco */
+  if (typeof monaco !== 'undefined') {
+    const basePath = '/types/webgpu/dist/index.d.ts';
+    const text = await getText(basePath);
+    monaco.languages.typescript.javascriptDefaults.addExtraLib(text, '');
+  }
+
+
+}
+
 /**
  * Fix any local URLs into fully qualified urls.
  *
@@ -200,6 +216,7 @@ window.lessonEditorSettings = {
   lessonSettings,
   prepHTML,
   getWorkerPreamble,
+  initEditor,
   tags: ['webgpu', 'webgpufundamentals.org'],
   name: 'WebGPUFundamentals',
   icon: '/webgpu/lessons/resources/webgpufundamentals-icon-256.png',