Merge pull request #399 from conwnet/master

release 0.7.0

.eslintignore

@@ -2,3 +2,6 @@
 **/lib/vscode/**
 **/dist/**
 **/src/vs/**
+htm.module.js
+preact.module.js
+preact-hooks.module.js

.eslintrc.json

@@ -8,6 +8,16 @@
   "extends": ["plugin:prettier/recommended"],
   "plugins": ["@typescript-eslint", "jsdoc"],
   "rules": {
+    "max-len": [
+      "error",
+      {
+        "code": 120,
+        "ignoreStrings": true,
+        "ignoreUrls": true,
+        "ignoreTemplateLiterals": true,
+        "ignoreComments": true
+      }
+    ],
     "constructor-super": "warn",
     "curly": "warn",
     "eqeqeq": "warn",

.github/workflows/build.yml

@@ -13,7 +13,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-20.04]
-        node-version: [14.x, 15.x]
+        node-version: [14.x, 16.x]
 
     runs-on: ${{ matrix.os }}
 

.github/workflows/test-wtih-vscode-build.yml

@@ -13,7 +13,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-20.04]
-        node-version: [14.x, 15.x]
+        node-version: [14.x, 16.x]
 
     runs-on: ${{ matrix.os }}
 

.gitignore

@@ -3,3 +3,5 @@ lib
 dist
 out
 node_modules
+.yalc
+yalc.lock

.prettierignore

@@ -2,5 +2,8 @@ lib
 dist
 out
 node_modules
-vscode-web-github1s/src/vs
-vscode-web-github1s/extensions
+vscode-web/src/vs
+vscode-web/extensions
+htm.module.js
+preact.module.js
+preact-hooks.module.js

.prettierrc.js

@@ -3,6 +3,7 @@ module.exports = {
 	useTabs: true,
 	semi: true,
 	singleQuote: true,
+	printWidth: 120,
 	overrides: [
 		{
 			files: ['*.yml', '*.yaml', '*.json'],

api/github-auth-callback/index.js

@@ -44,13 +44,10 @@ module.exports = async (req, res) => {
 
 	try {
 		// https://docs.github.com/en/developers/apps/authorizing-oauth-apps#2-users-are-redirected-back-to-your-site-by-github
-		const response = await got.post(
-			'https://github.com/login/oauth/access_token',
-			{
-				json: { client_id: CLIENT_ID, client_secret: CLIENT_SECRET, code },
-				responseType: 'json',
-			}
-		);
+		const response = await got.post('https://github.com/login/oauth/access_token', {
+			json: { client_id: CLIENT_ID, client_secret: CLIENT_SECRET, code },
+			responseType: 'json',
+		});
 		return sendResponseHtml(response.statusCode, response.body);
 	} catch (e) {
 		// the error is responded by GitHub

api/vscode-unpkg/index.js

@@ -20,10 +20,7 @@ module.exports = async (req, res) => {
 	const requestUrl = `https://${publisher}.vscode-unpkg.net/${publisher}/${restPartsPath}`;
 	const responsePromise = got(requestUrl);
 	const bufferPromise = responsePromise.buffer();
-	const [response, buffer] = await Promise.all([
-		responsePromise,
-		bufferPromise,
-	]);
+	const [response, buffer] = await Promise.all([responsePromise, bufferPromise]);
 
 	res.status(response.statusCode);
 	res.setHeader('cache-control', response.headers['cache-control']);

docs/guide.md

@@ -45,11 +45,11 @@ What happens after you run `yarn watch-with-vscode`?
 
 1. Copy some necessary resources (`index.html`, extensions config, libraries, etc.) to the `dist` directory.
 
-2. Go to `vscode-web-github1s/lib/vscode` and run `yarn gulp compile-web` to build the necessary extensions, then copy it to the `dist/extensions` directory.
+2. Go to `vscode-web/lib/vscode` and run `yarn gulp compile-web` to build the necessary extensions, then copy it to the `dist/extensions` directory.
 
-3. Go to `vscode-web-github1s/lib/vscode` and run `yarn watch` (the native watch of vscode), it will trigger a new build if something in it has been changed.
+3. Go to `vscode-web/lib/vscode` and run `yarn watch` (the native watch of vscode), it will trigger a new build if something in it has been changed.
 
-4. Watch the `vscode-web-github1s/src` directory, merge it in to `vscode-web-github1s/lib/vscode/src` if something in it has been changed. (When a new file is merged into `lib/vscode/src`, it will trigger the watcher that is described in Step 3)
+4. Watch the `vscode-web/src` directory, merge it in to `vscode-web/lib/vscode/src` if something in it has been changed. (When a new file is merged into `lib/vscode/src`, it will trigger the watcher that is described in Step 3)
 
 5. Go to `extensions/github1s` and run `yarn watch`, it will trigger a new build if something has been changed.
 

extensions/github1s/assets/pages/components.css

@@ -0,0 +1,164 @@
+.vscode-button {
+  border: none;
+  display: inline-block;
+  padding: 0 10px;
+  height: 26px;
+  line-height: 26px;
+  font-size: 14px;
+  outline: 1px solid transparent;
+  outline-offset: 2px !important;
+  color: var(--vscode-button-foreground);
+  background: var(--vscode-button-background);
+  cursor: pointer;
+}
+
+.vscode-button.loading {
+  opacity: .5;
+}
+
+.vscode-button.size-mini {
+  padding: 0 8px;
+  height: 22px;
+  line-height: 22px;
+  font-size: 12px;
+}
+
+.vscode-button.size-middle {
+  padding: 0 12px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 14px;
+}
+
+.vscode-button.size-large {
+  padding: 0 14px;
+  height: 34px;
+  line-height: 34px;
+  font-size: 18px;
+}
+
+.vscode-button:not([disabled]):hover {
+  background: var(--vscode-button-hoverBackground);
+}
+
+.vscode-button:not([disabled]):focus {
+  outline-color: var(--vscode-focusBorder);
+}
+
+.vscode-input {
+  border: none;
+  display: inline-block;
+  padding: 0 4px;
+  height: 26px;
+  line-height: 26px;
+  font-size: 13px;
+  outline: 1px solid transparent;
+  font-family: var(--vscode-font-family);
+  color: var(--vscode-input-foreground);
+  border: 1px solid var(--vscode-input-background);
+  background-color: var(--vscode-input-background);
+}
+
+.vscode-input.size-mini {
+  padding: 0 2px;
+  height: 22px;
+  line-height: 22px;
+  font-size: 12px;
+}
+
+.vscode-input.size-middle {
+  padding: 0 4px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 13px;
+}
+
+.vscode-input.size-large {
+  padding: 0 6px;
+  height: 34px;
+  line-height: 34px;
+  font-size: 18px;
+}
+
+.vscode-input:not([disabled]):focus {
+  outline-color: var(--vscode-focusBorder);
+  outline: 1px solid -webkit-focus-ring-color;
+  outline-offset: -1px;
+}
+
+.vscode-textarea {
+  border: none;
+  display: inline-block;
+  outline: 1px solid transparent;
+  font-family: var(--vscode-font-family);
+  color: var(--vscode-input-foreground);
+  border: 1px solid var(--vscode-input-background);
+  background-color: var(--vscode-input-background);
+}
+
+.vscode-textarea:not([disabled]):focus {
+  outline-color: var(--vscode-focusBorder);
+  outline: 1px solid -webkit-focus-ring-color;
+  outline-offset: -1px;
+}
+
+.vscode-loading {
+  width: 100%;
+  text-align: center;
+  height: 26px;
+}
+
+.vscode-loading > span {
+  height: 100%;
+  width: 5px;
+  display: inline-block;
+  margin-right: 4px;
+  background: var(--vscode-button-background);
+  animation: vscodeLoading 1.2s infinite ease-in-out;
+}
+
+.vscode-loading > span:nth-child(2) {
+  animation-delay: -1s;
+}
+
+.vscode-loading > span:nth-child(3) {
+  animation-delay: -0.9s;
+}
+
+.vscode-loading > span:nth-child(4) {
+  animation-delay: -0.8s;
+}
+
+.vscode-loading > span:nth-child(5) {
+  margin-right: 0 !important;
+  animation-delay: -0.7s;
+}
+
+@keyframes vscodeLoading {
+  0% {
+    transform: scaleY(0.4);
+  }
+  25% {
+    transform: scaleY(1);
+  }
+  50% {
+    transform: scaleY(0.4);
+  }
+  75% {
+    transform: scaleY(0.4);
+  }
+  100% {
+    transform: scaleY(0.4);
+  }
+}
+
+.vscode-link {
+  cursor: pointer;
+  color: var(--vscode-textLink-foreground);
+  text-decoration: underline;
+}
+
+.vscode-link:hover {
+  color: var(--vscode-textLink-activeForeground);
+}
+

extensions/github1s/assets/pages/components.js

@@ -0,0 +1,58 @@
+import { h } from './preact.module.js';
+import htm from './htm.module.js';
+
+export const html = htm.bind(h);
+
+export const VscodeButton = ({ size, loading, ...props }) => {
+	const sizeClass = `size-${size || 'small'}`;
+	const loadingClass = loading ? 'loading' : '';
+	const classes = `vscode-button ${sizeClass} ${loadingClass}`;
+
+	return html`<button class=${classes} disabled=${loading} ...${props} />`;
+};
+
+export const VscodeInput = ({ size, ...props }) => {
+	const classes = `vscode-input size-${size || 'small'}`;
+
+	return html`<input class=${classes} ...${props} />`;
+};
+
+export const VscodeTextarea = (props) => {
+	return html` <textarea class="vscode-textarea" ...${props} /> `;
+};
+
+export const VscodeLoading = ({ blockWidth, blockSpacing, ...props }) => {
+	const _blockWidth = blockWidth || '5px';
+	const _blockSpacing = blockSpacing || '4px';
+	const styleStr = `width: ${_blockWidth}; margin-right: ${_blockSpacing}`;
+	const blocks = Array.from({ length: 5 }).map(() => html`<span style=${styleStr} />`);
+
+	return html`<div class="vscode-loading" ...${props}>${blocks}</div>`;
+};
+
+export const VscodeLink = ({ to, external, ...props }) => {
+	const hrefProp = to ? { href: to } : {};
+	const roleProp = to ? {} : { role: 'button' };
+	const targetProp = external ? { target: '_blank' } : {};
+	const combineProps = { ...hrefProp, ...roleProp, ...targetProp };
+
+	return html` <a class="vscode-link" ...${combineProps} ...${props} /> `;
+};
+
+export const postMessage = (() => {
+	const vscode = window.acquireVsCodeApi();
+	const uniqueId = ((id) => () => id++)(1);
+	const messageMap = new Map();
+
+	window.addEventListener('message', ({ data }) => {
+		messageMap.has(data.id) && messageMap.get(data.id)(data.data);
+	});
+
+	return (type, data) => {
+		const messageId = uniqueId();
+		vscode.postMessage({ type, data, id: messageId });
+		return new Promise((resolve) => {
+			messageMap.set(messageId, resolve);
+		});
+	};
+})();