feat(browser): add git plugin to @slangroom/browser

.github/workflows/ci.yml

@@ -53,6 +53,12 @@ jobs:
         run: pnpm coverage
       - name: 🧪 Test grammar package
         run: pnpm test:grammar
+      - name: ↕️ Setup cors free proxy for cloning
+        run: |
+          git clone https://github.com/wmhilton/cors-buster
+          cd cors-buster
+          npm install
+          PORT=8000 npm start &
       - name: 📨 Setup playwright
         run: |
           npx playwright install

pkg/browser/package.json

@@ -3,11 +3,13 @@
 	"dependencies": {
 		"@slangroom/core": "workspace:*",
 		"@slangroom/deps": "workspace:*",
+		"@slangroom/git": "workspace:*",
 		"@slangroom/helpers": "workspace:*",
 		"@slangroom/http": "workspace:*",
 		"@slangroom/json-schema": "workspace:*",
 		"@slangroom/pocketbase": "workspace:*",
-		"@slangroom/qrcode": "workspace:*"
+		"@slangroom/qrcode": "workspace:*",
+		"buffer": "^6.0.3"
 	},
 	"version": "1.40.0",
 	"repository": "https://github.com/dyne/slangroom",
@@ -40,10 +42,13 @@
 	"devDependencies": {
 		"@playwright/test": "^1.40.1",
 		"@types/node": "^20.10.4",
-		"esbuild": "^0.21.4"
+		"@types/path-browserify": "^1.0.3",
+		"@zenfs/core": "^0.16.4",
+		"esbuild": "^0.21.4",
+		"path-browserify": "^1.0.1"
 	},
 	"scripts": {
-		"build": "pnpm exec esbuild --bundle src/index.ts --outfile=build/slangroom.js --target=es2016 --external:fs --external:path --external:crypto && cp build/slangroom.js public"
+		"build": "pnpm exec esbuild --bundle src/index.ts --outfile=build/slangroom.js --target=ESNext --external:crypto --alias:fs=@zenfs/core --alias:path=path-browserify && cp build/slangroom.js public"
 	},
 	"engines": {
 		"node": "^18.20.0 || ^20.10.0 || ^22"

pkg/browser/public/index.html

@@ -14,6 +14,7 @@ <h1>Test http</h1>
 		<div id="test-json-schema"></div>
 		<div id="test-pocketbase"></div>
 		<div id="test-pocketbase-2"></div>
+		<div id="test-git"></div>
 		<script>
 			const script = `
 Rule unknown ignore
@@ -117,6 +118,30 @@ <h1>Test http</h1>
 				.then((r) => {
 					Pocketbase2ResDiv.innerText = JSON.stringify(r.result);
 				})}, 3000);
+
+			//
+			const scriptGit = `
+Rule unknown ignore
+Given I connect to 'url' and send path 'path' and clone repository
+Given I open 'path' and verify git repository
+
+Given I have a 'string' named 'checked'
+Then print the data
+			`
+
+			const GitResDiv = document.getElementById('test-git');
+
+			slangroom
+				.execute(scriptGit, {
+					data:{
+						url: "http://localhost:8000/github.com/srfsh/dumb",
+						path: "slangroom",
+						checked: "true"
+					}
+				})
+				.then((r) => {
+					GitResDiv.innerText = JSON.stringify(r.result);
+			});
 		</script>
 	</body>
 </html>

pkg/browser/src/index.ts

@@ -4,16 +4,24 @@
 
 import { Slangroom, version as coreVersion } from '@slangroom/core';
 import { qrcode, version as qrcodeVersion } from '@slangroom/qrcode';
+import { git, version as gitVersion } from '@slangroom/git';
 import { http, version as httpVersion } from '@slangroom/http';
 import { pocketbase, version as pocketbaseVersion } from '@slangroom/pocketbase';
 import { helpers, version as helpersVersion } from '@slangroom/helpers';
 import { JSONSchema, version as jsonSchemaVersion } from '@slangroom/json-schema';
 import { zenroomVersion } from '@slangroom/deps/zenroom';
 import packageJson from '@slangroom/browser/package.json' with { type: 'json' };
 
+// web dependencies
+import { Buffer } from 'buffer';
+
 export const version = packageJson.version;
 
 const plugins_dict = {
+	git: {
+		plugin: git,
+		version: gitVersion
+	},
 	http: {
 		plugin: http,
 		version: httpVersion
@@ -51,4 +59,6 @@ const slangroom = new Slangroom(plugins);
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 (window as any).slangroom = slangroom; // instead of casting window to any, you can extend the Window interface: https://stackoverflow.com/a/43513740/5433572
 
+window.Buffer = Buffer;
+
 console.log(welcome_message);

pkg/browser/tests/example.spec.ts

@@ -5,6 +5,9 @@
 import { test, expect } from '@playwright/test';
 
 test('check results of slangroom', async ({ page }) => {
+	// set timeout
+	test.setTimeout(30000);
+
 	await page.goto('http://localhost:8080/');
 
 	// Expects page to have a heading with the name of Installation.
@@ -22,4 +25,9 @@ test('check results of slangroom', async ({ page }) => {
 	await expect(page.locator('#test-pocketbase-2')).toContainText(
 		"{\"output\":{\"name\":\"test organization\"}}"
 	);
+
+	await expect(page.locator('#test-git')).toContainText(
+		"{\"checked\":\"true\"}",
+		{ timeout: 20000 }
+	);
 });

pkg/git/src/plugin.ts

@@ -5,9 +5,9 @@
 import { Plugin } from '@slangroom/core';
 import gitpkg from 'isomorphic-git';
 // TODO: why does this require index.js?
-import http from 'isomorphic-git/http/node/index.js';
-import * as fs from 'node:fs/promises';
-import * as path from 'node:path';
+import http from 'isomorphic-git/http/web/index.js';
+import { promises as fs } from 'fs';
+import path from 'path';
 // read the version from the package.json
 import packageJson from '@slangroom/git/package.json' with { type: 'json' };
 
@@ -24,6 +24,7 @@ export class GitError extends Error {
  * @internal
  */
 export const sandboxDir = () => {
+	if (typeof process === 'undefined') return '.';
 	// TODO: sanitize sandboxDir
 	return process.env['FILES_DIR'];
 };