diff --git a/.eslintignore b/.eslintignore index 431d8b13d..2468ce197 100644 --- a/.eslintignore +++ b/.eslintignore @@ -2,3 +2,6 @@ **/lib/vscode/** **/dist/** **/src/vs/** +htm.module.js +preact.module.js +preact-hooks.module.js diff --git a/.eslintrc.json b/.eslintrc.json index e347ebdd3..dba469150 100644 --- a/.eslintrc.json +++ b/.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", diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 610e76de6..994951d61 100644 --- a/.github/workflows/build.yml +++ b/.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 }} diff --git a/.github/workflows/test-wtih-vscode-build.yml b/.github/workflows/test-wtih-vscode-build.yml index 2dc9acd3b..e30e22087 100644 --- a/.github/workflows/test-wtih-vscode-build.yml +++ b/.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 }} diff --git a/.gitignore b/.gitignore index 9a28bffee..f91e599aa 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,5 @@ lib dist out node_modules +.yalc +yalc.lock diff --git a/.prettierignore b/.prettierignore index e7d0610c2..ba16b14aa 100644 --- a/.prettierignore +++ b/.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 diff --git a/.prettierrc.js b/.prettierrc.js index 7779ecf43..de719df67 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -3,6 +3,7 @@ module.exports = { useTabs: true, semi: true, singleQuote: true, + printWidth: 120, overrides: [ { files: ['*.yml', '*.yaml', '*.json'], diff --git a/api/github-auth-callback/index.js b/api/github-auth-callback/index.js index a1db0ebcf..dadd68d1c 100644 --- a/api/github-auth-callback/index.js +++ b/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 diff --git a/api/vscode-unpkg/index.js b/api/vscode-unpkg/index.js index be274d790..f0e8c24a8 100644 --- a/api/vscode-unpkg/index.js +++ b/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']); diff --git a/docs/guide.md b/docs/guide.md index f88a867e5..b30400a8e 100644 --- a/docs/guide.md +++ b/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. diff --git a/extensions/github1s/assets/pages/components.css b/extensions/github1s/assets/pages/components.css new file mode 100644 index 000000000..8c0b5219a --- /dev/null +++ b/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); +} + diff --git a/extensions/github1s/assets/pages/components.js b/extensions/github1s/assets/pages/components.js new file mode 100644 index 000000000..405685e5b --- /dev/null +++ b/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``; +}; + +export const VscodeInput = ({ size, ...props }) => { + const classes = `vscode-input size-${size || 'small'}`; + + return html``; +}; + +export const VscodeTextarea = (props) => { + return html` `; +}; + +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``); + + return html`