rebase extension

package.json

@@ -32,7 +32,8 @@
         "./packages/lit-dev-server:build",
         "./packages/lit-dev-tests:build",
         "./packages/lit-dev-tools-cjs:build",
-        "./packages/lit-dev-tools-esm:build"
+        "./packages/lit-dev-tools-esm:build",
+        "./packages/lit-dev-tutorial-plugin:build"
       ]
     },
     "start": {

packages/lit-dev-content/site/learn/learn.11tydata.js

@@ -67,7 +67,7 @@ module.exports = {eleventyComputed: {learn: async (data) => {
       url,
       date
     } = content;
-    if (!title || !summary || !['article', 'tutorial', 'video'].includes(kind) || !url || !date) {
+    if (!title || summary === undefined || !['article', 'tutorial', 'video'].includes(kind) || !url || !date) {
       throw new Error(`Invalid content shape for: ${JSON.stringify(content)}`);
     }
     if (kind === "tutorial") {

packages/lit-dev-tutorial-plugin/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "displayName": "lit.dev Tutorial Editor",
   "description": "Helps you create tutorials for lit.dev",
-  "version": "0.0.1",
+  "version": "0.0.0",
   "author": "Google LLC",
   "license": "BSD-3-Clause",
   "main": "./out/extension.js",
@@ -180,21 +180,42 @@
   },
   "scripts": {
     "vscode:prepublish": "npm run build",
-    "build": "tsc -p ./",
-    "watch": "tsc -watch -p ./",
-    "pretest": "npm run build",
-    "test": "node ./out/test/runTest.js",
-    "clean": "rm -rf out .vscode-test .test-bin"
+    "build": "wireit",
+    "test": "wireit"
   },
   "devDependencies": {
-    "@types/glob": "^7.2.0",
-    "@types/mocha": "^9.1.0",
-    "@types/node": "14.x",
-    "@types/vscode": "^1.65.0",
-    "@vscode/test-electron": "^2.1.2",
-    "glob": "^7.2.0",
-    "mocha": "^9.2.1",
-    "playground-elements": "^0.15.2",
-    "typescript": "^4.5.5"
+    "@types/mocha": "^10.0.6",
+    "@types/node": "^16.0.0",
+    "@types/vscode": "^1.87.0",
+    "@vscode/test-electron": "^2.3.9",
+    "glob": "^10.3.0",
+    "mocha": "^10.0.6"
+  },
+  "wireit": {
+    "build": {
+      "command": "tsc --build --pretty --incremental",
+      "files": [
+        "./src/**/*.ts",
+        "tsconfig.json"
+      ],
+      "output": [
+        "./out/",
+        "./tsconfig.tsbuildinfo"
+      ],
+      "clean": "if-file-deleted"
+    },
+    "test": {
+      "command": "node ./out/test/runTest.js",
+      "dependencies": [
+        "build"
+      ],
+      "files": [
+        "./out/test/"
+      ],
+      "output": [
+        "./.vscode-test",
+        "./.test-bin"
+      ]
+    }
   }
 }

packages/lit-dev-tutorial-plugin/src/fs-helpers.ts

@@ -37,9 +37,12 @@ export const addTutorialTo11tyData = (
   let categoryLines: {cat: TutorialCategory; line: number}[] = [];
 
   for (const [i, line] of lines.entries()) {
-    if (line.includes(`const tutorials = await Promise.all([`)) {
+    if (line.includes(`return await Promise.all([`)) {
       arrayStartLine = i;
     } else if (line.includes(`  ]);`)) {
+      if (arrayStartLine === -1) {
+        continue;
+      }
       arrayEndLine = i;
       break;
     } else if (
@@ -54,7 +57,7 @@ export const addTutorialTo11tyData = (
   }
 
   if (arrayStartLine === -1 || arrayEndLine === -1) {
-    vscode.window.showErrorMessage('Malformed tutorials.11tydata.js');
+    vscode.window.showErrorMessage('Malformed _data/tutorials.js');
     return;
   }
 
@@ -71,7 +74,7 @@ export const addTutorialTo11tyData = (
 
   if (line === -1) {
     vscode.window.showErrorMessage(
-      'Cannot find category ${category} in tutorials.11tydata.js'
+      'Cannot find category ${category} in _data/tutorials.js'
     );
     return;
   }

packages/lit-dev-tutorial-plugin/src/test/suite/extension.test.ts

@@ -15,6 +15,7 @@ import {beforeEach, afterEach, before} from 'mocha';
 
 suite('Tutorial Extension', () => {
   vscode.window.showInformationMessage('Start all tests.');
+
   let litDevPath: string;
   let litDevContentPath!: string;
   before(async () => {

packages/lit-dev-tutorial-plugin/src/test/suite/index.ts

@@ -6,42 +6,38 @@
 
 import * as path from 'path';
 import * as Mocha from 'mocha';
-import * as glob from 'glob';
+import {glob} from 'glob';
 
 export function run(): Promise<void> {
-	// Create the mocha test
-	const mocha = new Mocha({
-		ui: 'tdd',
-		color: true
-	});
+  // Create the mocha test
+  const mocha = new Mocha({
+    ui: 'tdd',
+    color: true,
+  });
 
-	const testsRoot = path.resolve(__dirname, '..');
+  const testsRoot = path.resolve(__dirname, '..');
 
-	return new Promise((c, e) => {
-		glob('**/**.test.js', { cwd: testsRoot }, (err, files) => {
-			console.log(files);
-			if (err) {
-				return e(err);
-			}
+  return new Promise(async (c, e) => {
+    const files = await glob('**/**.test.js', {cwd: testsRoot});
+    console.log(files);
 
-			console.log(path.resolve(testsRoot, files[0]));
+    console.log(path.resolve(testsRoot, files[0]));
 
-			// Add files to the test suite
-			files.forEach(f => mocha.addFile(path.resolve(testsRoot, f)));
+    // Add files to the test suite
+    files.forEach((f) => mocha.addFile(path.resolve(testsRoot, f)));
 
-			try {
-				// Run the mocha test
-				mocha.run(failures => {
-					if (failures > 0) {
-						e(new Error(`${failures} tests failed.`));
-					} else {
-						c();
-					}
-				});
-			} catch (err) {
-				console.error(err);
-				e(err);
-			}
-		});
-	});
+    try {
+      // Run the mocha test
+      mocha.run((failures) => {
+        if (failures > 0) {
+          e(new Error(`${failures} tests failed.`));
+        } else {
+          c();
+        }
+      });
+    } catch (err) {
+      console.error(err);
+      e(err);
+    }
+  });
 }

packages/lit-dev-tutorial-plugin/src/test/util.ts

@@ -26,6 +26,12 @@ export const createEmptyLitDevRepo = async () => {
     'site',
     'tutorials'
   );
+  const litDevSite11tydataPath = path.join(
+    litDevContentPath,
+    'site',
+    '_data',
+    'tutorials.js'
+  );
   const litDevSiteTutorialContentPath = path.join(
     litDevSiteTutorialPath,
     'content'
@@ -76,10 +82,7 @@ export const createEmptyLitDevRepo = async () => {
       path.join(litDevSampleTutorialPath, 'base.json'),
       JSON.stringify(baseJson, null, 2)
     ),
-    fs.writeFile(
-      path.join(litDevSiteTutorialPath, 'tutorials.11tydata.js'),
-      tutorials11tyData
-    ),
+    fs.writeFile(litDevSite11tydataPath, tutorials11tyData),
   ]);
 
   return {litDevPath, litDevContentPath};
@@ -110,17 +113,19 @@ export const prepopulateTutorial = async (
     'site',
     'tutorials'
   );
+  const litDevSite11tydataPath = path.join(
+    litDevContentPath,
+    'site',
+    '_data',
+    'tutorials.js'
+  );
   const litDevSiteTutorialContentPath = path.join(
     litDevSiteTutorialPath,
     'content'
   );
 
   const promises: Promise<unknown>[] = [];
-  const dataFile = await (
-    await fs.readFile(
-      path.join(litDevSiteTutorialPath, 'tutorials.11tydata.js')
-    )
-  ).toString();
+  const dataFile = await (await fs.readFile(litDevSite11tydataPath)).toString();
   const dataFileLines = dataFile.split('\n');
 
   for (const tutorial of options.tutorials) {
@@ -193,7 +198,7 @@ export const prepopulateTutorial = async (
 
   for (let i = options.tutorials.length - 1; i >= 0; i--) {
     const tutorial = options.tutorials[i];
-    const tutorialSection = tutorial.category;
+    const tutorialSection = (tutorial as typeof tutorial & {category ?: 'Learn'|'Build'}).category ?? 'Learn';
     const tutorialIndex = dataFileLines.findIndex((line) =>
       line.includes(`// ${tutorialSection}`)
     );
@@ -202,12 +207,7 @@ export const prepopulateTutorial = async (
     dataFileLines.splice(tutorialIndex + 1, 0, tutorialLine);
   }
 
-  promises.push(
-    fs.writeFile(
-      path.join(litDevSiteTutorialPath, 'tutorials.11tydata.js'),
-      dataFileLines.join('\n')
-    )
-  );
+  promises.push(fs.writeFile(litDevSite11tydataPath, dataFileLines.join('\n')));
   await Promise.all(promises);
 };
 

packages/lit-dev-tutorial-plugin/src/tree-items/before-after-dir.ts

@@ -61,7 +61,11 @@ export class BeforeAfterDir extends vscode.TreeItem {
     }
   }
 
-  static create(tutorialStep: TutorialStep, name: 'before' | 'after') {
+  static create(
+    tutorialStep: TutorialStep,
+    name: 'before' | 'after',
+    checkable?: boolean
+  ) {
     const provider = tutorialStep.provider;
     const newDir = new BeforeAfterDir(provider, tutorialStep, name);
     newDir.contextValue = `${name}Dir`;
@@ -89,6 +93,9 @@ export class BeforeAfterDir extends vscode.TreeItem {
       extends: '/samples/base.json',
       files: {},
     };
+    if (checkable) {
+      projectJson.extends = '/samples/checkable-tutorial-base.json';
+    }
     GenericFile.create(
       provider,
       path.join(newDir.path, 'project.json'),
@@ -103,11 +110,31 @@ export class BeforeAfterDir extends vscode.TreeItem {
 <html>
   <head>
     <script type="module" src=""></script>
-  </head>
+${
+  checkable
+    ? '    <!-- playground-hide --><script type="module" src="./_check-code.js"></script><!-- playground-hide-end -->\n'
+    : ''
+}  </head>
   <body>
   </body>
 </html>`
     );
+    if (checkable) {
+      PlaygroundFile.create(
+        newDir,
+        '_check-code.js',
+        {hidden: true},
+        `import {installCodeChecker} from './_check-code-helpers.js';
+
+installCodeChecker(async () => {
+  let passed = true;
+  let message = '';
+
+  window.location.reload();
+  return {passed, message};
+});`
+      );
+    }
 
     provider.refresh();
 

packages/lit-dev-tutorial-plugin/src/tree-items/tutorial-step.ts

@@ -288,7 +288,7 @@ export class TutorialStep extends vscode.TreeItem {
     const step = new TutorialStep(provider, tutorial, dirName, hideSolve);
     tutorial.pushStep(step);
 
-    const beforeStep = BeforeAfterDir.create(step, 'before');
+    const beforeStep = BeforeAfterDir.create(step, 'before', checkable);
     step.beforeDir = beforeStep;
 
     if (hasAfter && !hideSolve) {