added altair-crx

.github/workflows/_publish-electron.yml

@@ -168,7 +168,7 @@ jobs:
       # It is unclear to me what the payload size limit is for the choco push command (the best info I could find about this is: https://github.com/chocolatey-community/chocolatey-packages/issues/1179).
       # If this is really a problem, someone needs to figure out a proper solution for this (most likely changing it to a non-embedded package, or some other solution I'm not aware of).
       - name: chocolatey push
-        if: startsWith(matrix.os, 'windows') && ${{ inputs.publish_chocolatey }} && ${{ inputs.publish }}
+        if: ${{ startsWith(matrix.os, 'windows') && inputs.publish_chocolatey && inputs.publish }}
         continue-on-error: true
         uses: crazy-max/ghaction-chocolatey@v3
         with:

.github/workflows/experimental-release.yml

@@ -73,23 +73,23 @@ jobs:
         continue-on-error: true
         with:
           uuid: '{c336a627-bbea-4dbb-aa77-83899b52149a}'
-          xpi: extension-builds/mozilla-build/build.zip
-          manifest: extension-builds/mozilla-files/manifest.json
+          xpi: packages/altair-crx/altair.zip
+          manifest: packages/altair-crx/dist/manifest.json
           api-key: ${{ secrets.FIREFOX_API_KEY }}
           api-secret: ${{ secrets.FIREFOX_API_SECRET }}
       - uses: wdzeng/edge-addon@v1
         continue-on-error: true
         with:
           product-id: f725e625-c035-444d-b373-fba0e41855c1
-          zip-path: extension-builds/chrome-build/build.zip
+          zip-path: packages/altair-crx/altair.zip
           client-id: ${{ secrets.EDGE_CLIENT_ID }}
           client-secret: ${{ secrets.EDGE_CLIENT_SECRET }}
           access-token-url: ${{ secrets.EDGE_ACCESS_TOKEN_URL }}
       - uses: wdzeng/chrome-extension@v1
         continue-on-error: true
         with:
           extension-id: flnheeellpciglgpaodhkhmapeljopja
-          zip-path: extension-builds/chrome-build/build.zip
+          zip-path: packages/altair-crx/altair.zip
           client-id: ${{ secrets.CHROME_CLIENT_ID }}
           client-secret: ${{ secrets.CHROME_CLIENT_SECRET }}
           refresh-token: ${{ secrets.CHROME_REFRESH_TOKEN }}
@@ -99,7 +99,7 @@ jobs:
           refresh-token: ${{ secrets.CHROME_REFRESH_TOKEN }}
           client-id: ${{ secrets.CHROME_CLIENT_ID }}
           client-secret: ${{ secrets.CHROME_CLIENT_SECRET }}
-          zip: extension-builds/chrome-build/build.zip
+          zip: packages/altair-crx/altair.zip
           extension: flnheeellpciglgpaodhkhmapeljopja
   chrome-extension-upload:
     name: Publish webextension
@@ -121,7 +121,7 @@ jobs:
       - name: Upload & release
         uses: mnao305/chrome-extension-upload@1.1.1
         with:
-          file-path: extension-builds/chrome-build/build.zip
+          file-path: packages/altair-crx/altair.zip
           extension-id: flnheeellpciglgpaodhkhmapeljopja
           client-id: ${{ secrets.CHROME_CLIENT_ID }}
           client-secret: ${{ secrets.CHROME_CLIENT_SECRET }}

package.json

@@ -68,7 +68,7 @@
     "build-api": "pnpm --dir packages/altair-api build",
     "build-app": "pnpm -F @altairgraphql/app build",
     "build-electron": "pnpm build:ci && pnpm --dir packages/altair-electron build",
-    "build-ext": "pnpm build-app && cwex build",
+    "build-ext": "pnpm --dir packages/altair-crx build",
     "bootstrap": "turbo run bootstrap",
     "build:ci": "pnpm bootstrap",
     "ci:publish": "pnpm publish -r",

packages/altair-crx/.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+public/altair-app
+web-ext-artifacts

packages/altair-crx/bin/postbuild.js

@@ -0,0 +1,13 @@
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import AdmZip from 'adm-zip';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const outDir = resolve(__dirname, '..', 'dist');
+// create zip file of the dist directory
+const zip = new AdmZip();
+zip.addLocalFolder(outDir);
+zip.writeZip(resolve(__dirname, '..', 'altair.zip'));
+
+console.log('Generated altair.zip');

packages/altair-crx/bin/prebuild.js

@@ -0,0 +1,24 @@
+import { resolve, dirname } from 'path';
+import { readFileSync, writeFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { getDistDirectory, renderAltair, renderInitSnippet } from 'altair-static';
+import { createRequire } from 'node:module';
+import copy from 'recursive-copy';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const require = createRequire(import.meta.url);
+console.log(getDistDirectory());
+const dest = resolve(__dirname, '../public/altair-app');
+const res = await copy(getDistDirectory(), dest, { overwrite: true, expand: true });
+console.log(`Copied ${res.length} files to ${dest}`);
+
+const indexPageOutput = renderAltair({
+  baseURL: '/altair-app/',
+  serveInitialOptionsInSeperateRequest: 'init.js',
+});
+const initScript = renderInitSnippet();
+
+writeFileSync(resolve(dest, 'index.html'), indexPageOutput, 'utf8');
+writeFileSync(resolve(dest, 'init.js'), initScript, 'utf8');
+console.log('Updated additional files');

packages/altair-crx/generate-manifest.ts

@@ -0,0 +1,15 @@
+import { Plugin } from 'vite';
+
+export const generateManifest = (manifest: chrome.runtime.ManifestV3): Plugin => {
+  return {
+    name: 'generate-manifest',
+    buildStart(opts) {
+      console.log('Generating manifest.json');
+      this.emitFile({
+        type: 'asset',
+        fileName: 'manifest.json',
+        source: JSON.stringify(manifest, null, 2),
+      });
+    },
+  };
+};

packages/altair-crx/manifest.config.ts

@@ -0,0 +1,56 @@
+import packageJson from './package.json';
+const { version } = packageJson;
+
+// Convert from Semver (example: 0.1.0-beta6)
+const [major, minor, patch, label = '0'] = version
+  // can only contain digits, dots, or dash
+  .replace(/[^\d.-]+/g, '')
+  // split into version parts
+  .split(/[.-]/);
+
+const isDev = process.env.NODE_ENV === 'development';
+
+export const manifest: chrome.runtime.ManifestV3 = {
+  manifest_version: 3,
+  name: isDev ? '[INTERNAL] Altair GraphQL Client' : 'Altair GraphQL Client',
+  short_name: isDev ? '[INTERNAL] Altair' : 'Altair',
+  description: 'A beautiful feature-rich GraphQL Client for all platforms.',
+  // up to four numbers separated by dots
+  version: `${major}.${minor}.${patch}`, // .${label}`,
+  // semver is OK in "version_name"
+  version_name: version,
+  icons: {
+    16: 'icon.png',
+    48: 'icon.png',
+    128: 'icon.png',
+  },
+  action: {
+    default_icon: 'icon.png',
+  },
+  permissions: ['storage', 'tabs', 'notifications'],
+  host_permissions: ['https://*/*', 'http://*/*'],
+  background: {
+    scripts: ['assets/background.js'], // required for firefox support
+    service_worker: 'assets/background.js',
+    type: 'module',
+  } as chrome.runtime.ManifestV3['background'],
+  options_ui: {
+    page: 'src/options.html',
+    open_in_tab: false,
+  },
+  offline_enabled: true,
+  content_security_policy: {
+    // We can probably slim down this CSP further
+    sandbox:
+      "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'sha256-765ndVO8s0mJNdlCDVQJVuWyBpugFWusu1COU8BNbI8=' 'sha256-btk6arYQcHAX3O853bPKjrJz/yX/iuv4n0kXWYdJlEE=' 'sha256-kFTKSG2YSVB69S6DWzferO6LmwbqfHmYBTqvVbPEp4I=' 'unsafe-eval' https://cdn.jsdelivr.net https://apis.google.com https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com http://localhost:* https://localhost:* http://localhost:8002 http://localhost:8080; object-src 'self'; child-src 'self';",
+  },
+  sandbox: {
+    pages: ['altair-app/iframe-sandbox/index.html'],
+  },
+  web_accessible_resources: [
+    {
+      resources: ['*.css', '*.woff', '*.woff2'],
+      matches: ['<all_urls>'],
+    },
+  ],
+};

packages/altair-crx/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@altairgraphql/crx",
+  "private": true,
+  "version": "8.1.3",
+  "type": "module",
+  "scripts": {
+    "prebuild": "node bin/prebuild.js",
+    "build": "rimraf dist && pnpm prebuild && tsc && vite build && node bin/postbuild.js",
+    "run:f": "web-ext run -s dist --browser-console",
+    "lint:f": "web-ext lint -s dist",
+    "build:f": "web-ext build -s dist --verbose"
+  },
+  "dependencies": {
+    "altair-static": "workspace:*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/adm-zip": "^0.5.7",
+    "@types/chrome": "^0.0.209",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^1.3.0",
+    "adm-zip": "^0.5.16",
+    "jszip": "^3.10.1",
+    "recursive-copy": "^2.0.14",
+    "rimraf": "^5.0.5",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.15",
+    "web-ext": "^8.3.0"
+  }
+}

packages/altair-crx/src/App.css

@@ -0,0 +1,42 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+button {
+  font-size: calc(10px + 2vmin);
+}

packages/altair-crx/src/App.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react'
+import logo from './logo.svg'
+import './App.css'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>Hello Vite + React!</p>
+        <p>
+          <button type="button" onClick={() => setCount((count) => count + 1)}>
+            count is: {count}
+          </button>
+        </p>
+        <p>
+          Edit <code>App.tsx</code> and save to test HMR updates.
+        </p>
+        <p>
+          <a
+            className="App-link"
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn React
+          </a>
+          {' | '}
+          <a
+            className="App-link"
+            href="https://vitejs.dev/guide/features.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Vite Docs
+          </a>
+        </p>
+      </header>
+    </div>
+  )
+}
+
+export default App