\n \n \n
\n );\n }\n}","import React from 'react';\nimport {classNames} from '../libs/css-utils.js';\nimport * as gists from '../libs/gists.js';\nimport ServiceContext from '../ServiceContext.js';\n\nexport default class SaveAsGist extends React.Component {\n constructor () {\n super();\n this.state = {\n saving: false,\n secret: false,\n };\n }\n componentDidMount() {\n const {userManager} = this.context;\n userManager.subscribe(this.onPatChange);\n }\n componentWillUnmount() {\n const {userManager} = this.context;\n userManager.unsubscribe(this.onPatChange);\n }\n onPatChange = () => {\n this.forceUpdate();\n }\n toggleSecret = () => {\n this.setState({secret: !this.state.secret});\n }\n saveNew = async() => {\n const {github, addError} = this.context;\n const {secret} = this.state;\n this.setState({saving: true});\n const {data, onSave, onClose} = this.props;\n let success = false;\n try {\n const {id, name, date, public: _public} = await github.createGist(data, secret);\n gists.addGist(id, name, date, _public);\n onSave(id);\n success = true;\n } catch (e) {\n addError(`could not create gist: ${e}`)\n }\n this.setState({saving: false});\n if (success) {\n onClose();\n }\n }\n saveOverExisting = async() => {\n const {github, addError} = this.context;\n this.setState({saving: true});\n const {data, gistId, onClose} = this.props;\n let success = false;\n try {\n const {id, name, date, public: _public} = await github.updateGist(gistId, data);\n gists.addGist(id, name, date, _public);\n success = true;\n } catch (e) {\n addError(`could not update gist: ${e}`)\n }\n this.setState({saving: false});\n if (success) {\n onClose();\n }\n }\n forkAndSave = async() => {\n const {github, addError} = this.context;\n const {data, gistId, onSave, onClose} = this.props;\n const {secret} = this.state;\n this.setState({saving: true});\n let success = false;\n try {\n const {id: newId} = await github.forkGist(gistId, secret);\n const {id, name, date, public: _public} = await github.updateGist(newId, data);\n gists.addGist(id, name, date, _public);\n onSave(id);\n success = true\n } catch (e) {\n addError(`could not fork and update gist: ${e}`);\n }\n this.setState({saving: false});\n if (success) {\n onClose();\n }\n }\n renderLogin() {\n const {userManager} = this.context;\n return (\n StackOverflow Snippet (copy the code below paste into S.O.)
\n\n
\n this.onChange(true)}/>
\n this.onChange(false)}/>
\n S.O. does not support es6 modules yet so picking \"As Module\" puts the code in a <script> in the HTML.
\n{makeSnippet(data, asModule)}\n HTML (copy the code below paste into a file)
\n\n
\n this.onChange(true)}/>
\n this.onChange(false)}/>
\n {makeHTML(data, asModule)}\n \n Login with github\n
\n );\n }\n renderSave() {\n const {saving, secret} = this.state;\n const {userManager} = this.context;\n const userData = userManager.getUserData();\n const {gistId, gistOwnerId} = this.props;\n const canUpdate = userData && gistId && userData.id === gistOwnerId;\n const canFork = userData && gistId && userData.id !== gistOwnerId;\n return (\n \n
\n );\n }\n render() {\n const {userManager} = this.context;\n const userData = userManager.getUserData();\n return userData ? this.renderSave() : this.renderLogin();\n }\n}\n\nSaveAsGist.contextType = ServiceContext;","import React from 'react';\n\nexport default function SaveAsJSON(props) {\n const {data} = props;\n return (\n \n Save to New Gist\n Update Current Gist\n Fork and Save Gist\n
\n \n
\n
\n \n
Warning:\n\n\n
\n (see docs)\n- You can not change a gist from public to secret
\n- Secret gists are still publicly accessible they're just unlisted
\n
\n
\n );\n}","import React from 'react';\n\nimport {jsonToCompressedBase64} from '../libs/compression.js';\n\nexport default function SaveAsURL(props) {\n const {data} = props;\n const src = jsonToCompressedBase64(data);\n const url = `${window.location.origin}?src=${encodeURIComponent(src)}`;\n return url.length < 8000\n ? (\n \n Copy the text below, paste into the load ui or put somewhere on the net\n and make your own URL with
\n {window.location.origin}?src=url-to-json.\n {JSON.stringify(data)}\n \n \n
\n )\n : (\n Copy / bookmark the link below
\n {url}\n \n Too large to save as URL\n
\n )\n ;\n}\n","import React from 'react';\nimport Dialog from './Dialog.js';\nimport Embed from './Embed.js';\nimport Export from './Export.js';\nimport SaveAsGist from './SaveAsGist.js';\nimport SaveAsJSON from './SaveAsJSON.js';\nimport SaveAsURL from './SaveAsURL.js';\nimport Section from './Section.js';\n\nexport default function Save(props) {\n const {data, gistId, gistOwnerId, onSave, onClose} = props;\n return (\n \n )\n}\n","import React from 'react';\n\nimport Dialog from './Dialog.js';\nimport Section from './Section.js';\nimport ServiceContext from '../ServiceContext.js';\n\nimport verticalIcon from '../icons/vertical-layout.svg';\nimport horizontalIcon from '../icons/horizontal-layout.svg';\nimport twoByTwoIcon from '../icons/two-by-two-layout.svg';\nimport tabbedIcon from '../icons/tabbed-layout.svg';\n\nimport {classNames} from '../libs/css-utils.js';\nimport * as uiModel from '../libs/ui-model.js';\n\nfunction RadioOption(props) {\n const {children, onChange, selected} = props;\n return (\n \n {children}\n
\n );\n}\n\nfunction Radio(props) {\n const {selected, onChange, children} = props;\n\n const newChildren = React.Children.map(children, (child) => {\n if (!React.isValidElement(child)) {\n return null;\n }\n\n const {result} = child.props;\n const isSelected = result === selected;\n\n //const id = childNdx;\n //childNdx += 1;\n return React.cloneElement(child, {\n //...child.props,\n selected: isSelected,\n onChange: () => onChange(result),\n });\n });\n\n return (\n \n {newChildren}\n
\n );\n}\n\nfunction Checkbox(props) {\n const {id, label, checked, onChange} = props;\n const elemId = `checkbox-${id}`;\n return (\n \n onChange(e.target.checked)}\n />\n \n
\n );\n}\n\nclass Logout extends React.Component {\n componentDidMount() {\n const {userManager} = this.context;\n userManager.subscribe(this.handleChange);\n }\n componentWillUnmount() {\n const {userManager} = this.context;\n userManager.unsubscribe(this.handleChange);\n }\n handleChange = () => {\n this.forceUpdate();\n }\n handleLogout = () => {\n const {userManager} = this.context;\n userManager.logout();\n }\n render() {\n const {userManager} = this.context;\n const userData = userManager.getUserData();\n return (!!userData &&\n Logged in as: \n {!!userData.login && }\n {!!userData.avatar_url && 
}\n
\n \n \n \n \n \n \n \n \n \n \n
\n );\n}","import SubscriptionManager from './SubscriptionManager.ts';\n\nconst kUserManagerKey = 'foobar'; // not important\n\nexport default class UserManager {\n constructor({\n oauthManager,\n github,\n addError,\n }) {\n this.oauthManager = oauthManager;\n this.github = github;\n this.subscriptionManager = new SubscriptionManager();\n this.addError = addError;\n oauthManager.subscribe(this._handleNewAuth);\n this._handleNewAuth();\n this.userData = undefined;\n }\n /*\n {\n \"login\": \"greggman\",\n \"id\": 234804,\n \"node_id\": \"MDQ6VXNlcjIzNDgwNA==\",\n \"avatar_url\": \"https://avatars2.githubusercontent.com/u/234804?v=4\",\n \"gravatar_id\": \"\",\n \"url\": \"https://api.github.com/users/greggman\",\n \"html_url\": \"https://github.com/greggman\",\n \"followers_url\": \"https://api.github.com/users/greggman/followers\",\n \"following_url\": \"https://api.github.com/users/greggman/following{/other_user}\",\n \"gists_url\": \"https://api.github.com/users/greggman/gists{/gist_id}\",\n \"starred_url\": \"https://api.github.com/users/greggman/starred{/owner}{/repo}\",\n \"subscriptions_url\": \"https://api.github.com/users/greggman/subscriptions\",\n \"organizations_url\": \"https://api.github.com/users/greggman/orgs\",\n \"repos_url\": \"https://api.github.com/users/greggman/repos\",\n \"events_url\": \"https://api.github.com/users/greggman/events{/privacy}\",\n \"received_events_url\": \"https://api.github.com/users/greggman/received_events\",\n \"type\": \"User\",\n \"site_admin\": false,\n \"name\": \"Greggman\",\n \"company\": null,\n \"blog\": \"http://games.greggman.com\",\n \"location\": \"Earth\",\n \"email\": \"github@greggman.com\",\n \"hireable\": null,\n \"bio\": \"30 years of games\\r\\n5 years of Chrome\",\n \"twitter_username\": null,\n \"public_repos\": 283,\n \"public_gists\": 80,\n \"followers\": 1037,\n \"following\": 3,\n \"created_at\": \"2010-04-01T08:48:05Z\",\n \"updated_at\": \"2020-10-24T06:05:24Z\"\n }\n */\n getUserData() {\n return this.userData;\n }\n _handleNewAuth = async() => {\n this.userData = undefined;\n const pat = this.oauthManager.pat();\n this.github.setPat(pat);\n if (pat) {\n try {\n const data = await this.github.getAuthenticatedUser();\n this.userData = data;\n } catch (e) {\n this.addError(e);\n }\n }\n this.subscriptionManager.notify(kUserManagerKey);\n }\n login = () => {\n this.oauthManager.login();\n }\n logout = () => {\n this.oauthManager.logout();\n this.github.setPat()\n }\n subscribe(fn) {\n this.subscriptionManager.subscribe(kUserManagerKey, fn);\n }\n unsubscribe(fn) {\n this.subscriptionManager.unsubscribe(kUserManagerKey, fn);\n }\n cleanup() {\n this.oauthManager.unsubscribe(this._handleNewAuth);\n }\n}\n\n","import React from 'react';\n\nimport EditLine from './EditLine.js';\n// import Footer from './Footer.js';\nimport {storageManager} from '../globals.js';\nimport GitHub from '../libs/GitHub.js';\nimport Head from './Head.js';\nimport Help from './Help.js';\nimport IDE from './IDE.js';\nimport Load from './Load.js';\nimport {isGistId, loadGistFromSrc} from '../libs/loader.js';\nimport {LogManager} from './Log.js';\nimport * as model from '../libs/model.js';\nimport Save from './Save.js';\nimport ServiceContext from '../ServiceContext.js';\nimport Settings from './Settings.js';\nimport Toolbar from './Toolbar.js';\nimport * as uiModel from '../libs/ui-model.js';\nimport UserManager from '../libs/UserManager.js';\nimport * as winMsgMgr from '../libs/WindowMessageManager';\nimport query from '../libs/start-query.js';\n\nimport './App.css';\nimport { classNames } from '../libs/css-utils.js';\n\nconst noJSX = () => [];\nconst darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');\n\nclass App extends React.Component {\n constructor(props) {\n super();\n this.state = {\n path: window.location.pathname,\n dark: darkMatcher.matches,\n fullscreen: !!query.fullscreen,\n loading: false,\n dialog: noJSX,\n gistId: '',\n messages: [],\n userData: {},\n updateVersion: 0,\n };\n this.github = new GitHub();\n this.oauthManager = props.oauthManager;\n this.backupManager = props.backupManager;\n this.logManager = new LogManager();\n this.userManager = new UserManager({\n oauthManager: this.oauthManager,\n github: this.github,\n addError: this.addError,\n });\n this.toolbarFns = {\n handleRun: this.handleRun,\n handleStop: this.handleStop,\n handleSave: this.handleSave,\n handleNew: this.handleNew,\n handleLoad: this.handleLoad,\n handleSettings: this.handleSettings,\n handleFullscreen: this.handleFullscreen,\n handleHelp: this.handleHelp,\n };\n }\n componentWillUnmount() {\n uiModel.unsubscribe(this.handleUIChange);\n this.userManager.cleanup();\n }\n componentDidMount() {\n uiModel.subscribe(this.handleUIChange);\n winMsgMgr.on('newGist', null, this.handleNewGist);\n this.github.addEventListener('userdata', (e) => {\n this.setState({\n userData: e.data,\n });\n });\n model.add('path', window.location.pathname);\n model.subscribe('path', (newValue) => {\n window.history.pushState({}, '', newValue);\n this.setState({\n path: newValue,\n });\n });\n // I still am not sure how I'm supposed to handle this.\n // Putting my model in the state itself seems wrong\n // and doesn't actually help since I'd have to \n // generate an entirely new state object to change any\n // nested property.\n //\n // Storing the data outside I see no way to tell\n // components to re-render except to call forceUpdate\n // which all the documentation says \"if you call this\n // you're doing it wrong\".\n //\n // Redux is a joke. 50 lines code needed to set\n // a single field. Repeat those 50 lines for every field.\n // Things like redux-tools make it less to type those\n // 50 lines but they still execute 50 to 500 lines of code\n // just to set a single value.\n model.subscribe(model.filesVersionKey, _ => {\n this.forceUpdate();\n });\n // this is a hack because I can't figure out how to\n // update the CodeMirror areas\n model.subscribe('updateVersion', _ => {\n this.setState({updateVersion: this.state.updateVersion + 1});\n });\n\n darkMatcher.addEventListener('change', () => {\n this.setState({dark: darkMatcher.matches});\n });\n\n if (query.newGist) {\n window.history.pushState({}, '', `${window.location.origin}`);\n window.opener.postMessage({type: 'gimmeDaCodez'}, '*');\n return;\n }\n\n const backup = this.backupManager.getBackup();\n let loaded = false;\n if (backup) {\n try {\n const data = JSON.parse(backup);\n if (data.href === window.location.href) {\n model.setData(data.data);\n const url = new URL(data.href);\n const {src} = Object.fromEntries(new URLSearchParams(url.search).entries());\n if (isGistId(src)) {\n this.setState({gistId: src, gistOwnerId: data.gistOwnerId});\n }\n loaded = true;\n this.addInfo('loaded backup from local storage')\n }\n } catch (e) {\n console.log('bad backup')\n }\n this.backupManager.clearBackup();\n }\n if (!loaded) {\n if (query.src) {\n this.loadData(query.src);\n }\n }\n this.updateTitle();\n }\n componentDidUpdate() {\n this.updateTitle();\n }\n updateTitle() {\n const data = model.getData();\n document.title = data.name || 'jsGist';\n }\n async loadData(src) {\n this.setState({loading: true});\n let success = true;\n let firstTry = true;\n for (;;) {\n try {\n const {data, id, rawData} = await loadGistFromSrc(src, this.github);\n model.setData(data);\n if (id) {\n this.setState({\n gistId: src,\n gistOwnerId: rawData?.owner?.id,\n });\n }\n break;\n } catch (e) {\n if (firstTry) {\n this.userManager.logout();\n firstTry = false;\n } else {\n success = false;\n console.warn(e);\n this.addError(`could not load jsGist: src=${src} ${e}`);\n break;\n }\n }\n }\n this.setState({loading: false});\n if (success) {\n this.handleRun();\n }\n }\n handleUIChange = () => {\n this.forceUpdate();\n }\n handleNewGist = (data) => {\n let success = true;\n try {\n model.setData(data);\n this.backupManager.clearBackup();\n } catch (e) {\n success = false;\n console.warn(e);\n this.addError(`could create new jsGist: ${e}`);\n }\n if (success) {\n this.handleRun();\n }\n };\n addMsg = (msg, className) => {\n switch (className) {\n case 'error':\n console.error(msg);\n break;\n default:\n console.log(msg);\n break;\n }\n this.setState({messages: [{msg: msg.toString(), className}, ...this.state.messages]});\n setTimeout(() => {\n this.setState({messages: this.state.messages.slice(0, this.state.messages.length - 1)});\n }, 5000);\n }\n addInfo = (msg) => this.addMsg(msg, 'info');\n addError = (msg) => this.addMsg(msg, 'error');\n closeDialog = () => {\n this.setState({dialog: noJSX});\n }\n registerRunnerAPI = (api) => {\n this.runnerAPI = api;\n this.handleStop();\n }\n handleNew = async() => {\n this.backupManager.clearBackup();\n window.location.href = window.location.origin; // causes a reload\n }\n handleRun = async () => {\n this.backupManager.setBackup(JSON.stringify({\n href: window.location.href,\n data: model.getData(),\n gistOwnerId: this.state.gistOwnerId,\n }));\n this.logManager.clear();\n console.clear();\n this.runnerAPI.run(model.getData());\n }\n handleStop = async () => {\n this.runnerAPI.run(model.getBlankData(), true);\n }\n handleSave = async () => {\n this.setState({dialog: this.renderSave});\n }\n handleSettings = () => {\n this.setState({dialog: this.renderSettings});\n }\n handleFullscreen = () => {\n this.setState({fullscreen: !this.state.fullscreen});\n }\n handleHelp = () => {\n this.setState({dialog: this.renderHelp});\n }\n handleLoad = () => {\n this.setState({dialog: this.renderLoad});\n }\n handleOnLoad = async() => {\n this.setState({dialog: noJSX});\n this.handleRun();\n }\n handleOnSave = (gistId) => {\n window.history.pushState({}, '', `${window.location.origin}?src=${gistId}`);\n this.setState({\n gistId,\n gistOwnerId: this.userManager.getUserData().id,\n });\n }\n handleAbort = () => {\n this.abort();\n };\n renderHelp = () => {\n return (\n \n
\n {/*\n \n
\n {\n !loading &&\n \n
\n \n
\n \n model.setName(v)} />\n {!!userData.name && }\n {!!userData.avatarURL && 
}\n
\n \n
\n \n
\n }\n \n {\n this.state.messages.map(({msg, className}, i) => (
\n \n \n );\n }\n}\n\nexport default App;\n","const backupKey = 'backup';\r\n\r\nexport default class BackupManager {\r\n #storageManager;\r\n\r\n constructor(storageManager) {\r\n this.#storageManager = storageManager;\r\n }\r\n getBackup() {\r\n return this.#storageManager.get(backupKey);\r\n }\r\n setBackup(data) {\r\n this.#storageManager.set(backupKey, data);\r\n }\r\n clearBackup() {\r\n this.#storageManager.delete(backupKey);\r\n }\r\n}","\nimport {clientId} from '../globals.js';\nimport {createURL} from './url.js';\nimport {createPopup} from './utils';\nimport StorageManager from './StorageManager';\nimport * as winMsgMgr from './WindowMessageManager';\n\nconst patKey = 'pat';\n\nconst getTokenURL = process.env.REACT_APP_OAUTH_HELPER_URL;\nif (!getTokenURL) {\n throw Error ('must set environment variable: OAUTH_HELPER_URL');\n}\n\nexport default class OAuthManager {\n private _popup?: Window;\n private _state?: string;\n private _storageManager: StorageManager;\n\n constructor(storageManager: StorageManager) {\n this._popup = undefined;\n this._state = undefined; // last state sent to auth\n this._storageManager = storageManager;\n winMsgMgr.on('auth', null, (data: any) => {\n this._closePopup();\n if (data.state === this._state) {\n this.requestToken(data);\n }\n });\n }\n // TODO: rename this and decide if Github should be connected\n pat() {\n return this._storageManager.get(patKey);\n }\n subscribe(fn: () => void) {\n this._storageManager.subscribe(patKey, fn);\n }\n unsubscribe(fn: () => void) {\n this._storageManager.unsubscribe(patKey, fn);\n }\n _closePopup() {\n if (this._popup) {\n this._popup.close();\n this._popup = undefined;\n }\n }\n requestToken = async (auth: any) => {\n try {\n const params = {\n client: clientId,\n code: auth.code,\n };\n const url = createURL(getTokenURL, params);\n const req = await fetch(url);\n const data = await req.json();\n if (!data.access_token) {\n throw new Error(JSON.stringify(data));\n }\n this._storageManager.set(patKey, data.access_token);\n } catch (e) {\n console.error(e);\n }\n }\n logout = () => {\n this._storageManager.delete(patKey);\n }\n login = () => {\n this._closePopup();\n this._state = `${Date.now()}-${Math.random()}`; // does this need to special? Seems like no\n const url = createURL('https://github.com/login/oauth/authorize', {\n client_id: clientId,\n scope: 'gist',\n state: this._state,\n });\n this._popup = createPopup(url);\n }\n}","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' },\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then(registration => {\n registration.unregister();\n })\n .catch(error => {\n console.error(error.message);\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport {storageManager} from './globals.js';\nimport './index.css';\nimport './scrollbars.js';\nimport App from './components/App';\nimport BackupManager from './components/BackupManager.js';\nimport OAuthManager from './libs/OAuthManager';\nimport * as serviceWorker from './serviceWorker';\n\nconst oauthManager = new OAuthManager(storageManager);\nconst backupManager = new BackupManager(storageManager);\n\nReactDOM.render(\n {msg}
))\n }\n \n \n \n
\n );\n }\n}","import React from 'react';\nimport {classNames} from '../libs/css-utils.js';\nimport * as gists from '../libs/gists.js';\nimport ServiceContext from '../ServiceContext.js';\n\nexport default class SaveAsGist extends React.Component {\n constructor () {\n super();\n this.state = {\n saving: false,\n secret: false,\n };\n }\n componentDidMount() {\n const {userManager} = this.context;\n userManager.subscribe(this.onPatChange);\n }\n componentWillUnmount() {\n const {userManager} = this.context;\n userManager.unsubscribe(this.onPatChange);\n }\n onPatChange = () => {\n this.forceUpdate();\n }\n toggleSecret = () => {\n this.setState({secret: !this.state.secret});\n }\n saveNew = async() => {\n const {github, addError} = this.context;\n const {secret} = this.state;\n this.setState({saving: true});\n const {data, onSave, onClose} = this.props;\n let success = false;\n try {\n const {id, name, date, public: _public} = await github.createGist(data, secret);\n gists.addGist(id, name, date, _public);\n onSave(id);\n success = true;\n } catch (e) {\n addError(`could not create gist: ${e}`)\n }\n this.setState({saving: false});\n if (success) {\n onClose();\n }\n }\n saveOverExisting = async() => {\n const {github, addError} = this.context;\n this.setState({saving: true});\n const {data, gistId, onClose} = this.props;\n let success = false;\n try {\n const {id, name, date, public: _public} = await github.updateGist(gistId, data);\n gists.addGist(id, name, date, _public);\n success = true;\n } catch (e) {\n addError(`could not update gist: ${e}`)\n }\n this.setState({saving: false});\n if (success) {\n onClose();\n }\n }\n forkAndSave = async() => {\n const {github, addError} = this.context;\n const {data, gistId, onSave, onClose} = this.props;\n const {secret} = this.state;\n this.setState({saving: true});\n let success = false;\n try {\n const {id: newId} = await github.forkGist(gistId, secret);\n const {id, name, date, public: _public} = await github.updateGist(newId, data);\n gists.addGist(id, name, date, _public);\n onSave(id);\n success = true\n } catch (e) {\n addError(`could not fork and update gist: ${e}`);\n }\n this.setState({saving: false});\n if (success) {\n onClose();\n }\n }\n renderLogin() {\n const {userManager} = this.context;\n return (\n StackOverflow Snippet (copy the code below paste into S.O.)
\n\n
\n this.onChange(true)}/>
\n this.onChange(false)}/>
\n S.O. does not support es6 modules yet so picking \"As Module\" puts the code in a <script> in the HTML.
\n{makeSnippet(data, asModule)}\n HTML (copy the code below paste into a file)
\n\n
\n this.onChange(true)}/>
\n this.onChange(false)}/>
\n {makeHTML(data, asModule)}\n \n Login with github\n
\n );\n }\n renderSave() {\n const {saving, secret} = this.state;\n const {userManager} = this.context;\n const userData = userManager.getUserData();\n const {gistId, gistOwnerId} = this.props;\n const canUpdate = userData && gistId && userData.id === gistOwnerId;\n const canFork = userData && gistId && userData.id !== gistOwnerId;\n return (\n \n
\n );\n }\n render() {\n const {userManager} = this.context;\n const userData = userManager.getUserData();\n return userData ? this.renderSave() : this.renderLogin();\n }\n}\n\nSaveAsGist.contextType = ServiceContext;","import React from 'react';\n\nexport default function SaveAsJSON(props) {\n const {data} = props;\n return (\n \n Save to New Gist\n Update Current Gist\n Fork and Save Gist\n
\n \n
\n
\n \n
Warning:\n\n\n
\n (see docs)\n- You can not change a gist from public to secret
\n- Secret gists are still publicly accessible they're just unlisted
\n
\n
\n );\n}","import React from 'react';\n\nimport {jsonToCompressedBase64} from '../libs/compression.js';\n\nexport default function SaveAsURL(props) {\n const {data} = props;\n const src = jsonToCompressedBase64(data);\n const url = `${window.location.origin}?src=${encodeURIComponent(src)}`;\n return url.length < 8000\n ? (\n \n Copy the text below, paste into the load ui or put somewhere on the net\n and make your own URL with
\n {window.location.origin}?src=url-to-json.\n {JSON.stringify(data)}\n \n \n
\n )\n : (\n Copy / bookmark the link below
\n {url}\n \n Too large to save as URL\n
\n )\n ;\n}\n","import React from 'react';\nimport Dialog from './Dialog.js';\nimport Embed from './Embed.js';\nimport Export from './Export.js';\nimport SaveAsGist from './SaveAsGist.js';\nimport SaveAsJSON from './SaveAsJSON.js';\nimport SaveAsURL from './SaveAsURL.js';\nimport Section from './Section.js';\n\nexport default function Save(props) {\n const {data, gistId, gistOwnerId, onSave, onClose} = props;\n return (\n \n )\n}\n","import React from 'react';\n\nimport Dialog from './Dialog.js';\nimport Section from './Section.js';\nimport ServiceContext from '../ServiceContext.js';\n\nimport verticalIcon from '../icons/vertical-layout.svg';\nimport horizontalIcon from '../icons/horizontal-layout.svg';\nimport twoByTwoIcon from '../icons/two-by-two-layout.svg';\nimport tabbedIcon from '../icons/tabbed-layout.svg';\n\nimport {classNames} from '../libs/css-utils.js';\nimport * as uiModel from '../libs/ui-model.js';\n\nfunction RadioOption(props) {\n const {children, onChange, selected} = props;\n return (\n \n {children}\n
\n );\n}\n\nfunction Radio(props) {\n const {selected, onChange, children} = props;\n\n const newChildren = React.Children.map(children, (child) => {\n if (!React.isValidElement(child)) {\n return null;\n }\n\n const {result} = child.props;\n const isSelected = result === selected;\n\n //const id = childNdx;\n //childNdx += 1;\n return React.cloneElement(child, {\n //...child.props,\n selected: isSelected,\n onChange: () => onChange(result),\n });\n });\n\n return (\n \n {newChildren}\n
\n );\n}\n\nfunction Checkbox(props) {\n const {id, label, checked, onChange} = props;\n const elemId = `checkbox-${id}`;\n return (\n \n onChange(e.target.checked)}\n />\n \n
\n );\n}\n\nclass Logout extends React.Component {\n componentDidMount() {\n const {userManager} = this.context;\n userManager.subscribe(this.handleChange);\n }\n componentWillUnmount() {\n const {userManager} = this.context;\n userManager.unsubscribe(this.handleChange);\n }\n handleChange = () => {\n this.forceUpdate();\n }\n handleLogout = () => {\n const {userManager} = this.context;\n userManager.logout();\n }\n render() {\n const {userManager} = this.context;\n const userData = userManager.getUserData();\n return (!!userData &&\n Logged in as: \n {!!userData.login && }\n {!!userData.avatar_url && }\n
\n \n \n \n \n \n \n \n \n \n \n
\n );\n}","import SubscriptionManager from './SubscriptionManager.ts';\n\nconst kUserManagerKey = 'foobar'; // not important\n\nexport default class UserManager {\n constructor({\n oauthManager,\n github,\n addError,\n }) {\n this.oauthManager = oauthManager;\n this.github = github;\n this.subscriptionManager = new SubscriptionManager();\n this.addError = addError;\n oauthManager.subscribe(this._handleNewAuth);\n this._handleNewAuth();\n this.userData = undefined;\n }\n /*\n {\n \"login\": \"greggman\",\n \"id\": 234804,\n \"node_id\": \"MDQ6VXNlcjIzNDgwNA==\",\n \"avatar_url\": \"https://avatars2.githubusercontent.com/u/234804?v=4\",\n \"gravatar_id\": \"\",\n \"url\": \"https://api.github.com/users/greggman\",\n \"html_url\": \"https://github.com/greggman\",\n \"followers_url\": \"https://api.github.com/users/greggman/followers\",\n \"following_url\": \"https://api.github.com/users/greggman/following{/other_user}\",\n \"gists_url\": \"https://api.github.com/users/greggman/gists{/gist_id}\",\n \"starred_url\": \"https://api.github.com/users/greggman/starred{/owner}{/repo}\",\n \"subscriptions_url\": \"https://api.github.com/users/greggman/subscriptions\",\n \"organizations_url\": \"https://api.github.com/users/greggman/orgs\",\n \"repos_url\": \"https://api.github.com/users/greggman/repos\",\n \"events_url\": \"https://api.github.com/users/greggman/events{/privacy}\",\n \"received_events_url\": \"https://api.github.com/users/greggman/received_events\",\n \"type\": \"User\",\n \"site_admin\": false,\n \"name\": \"Greggman\",\n \"company\": null,\n \"blog\": \"http://games.greggman.com\",\n \"location\": \"Earth\",\n \"email\": \"github@greggman.com\",\n \"hireable\": null,\n \"bio\": \"30 years of games\\r\\n5 years of Chrome\",\n \"twitter_username\": null,\n \"public_repos\": 283,\n \"public_gists\": 80,\n \"followers\": 1037,\n \"following\": 3,\n \"created_at\": \"2010-04-01T08:48:05Z\",\n \"updated_at\": \"2020-10-24T06:05:24Z\"\n }\n */\n getUserData() {\n return this.userData;\n }\n _handleNewAuth = async() => {\n this.userData = undefined;\n const pat = this.oauthManager.pat();\n this.github.setPat(pat);\n if (pat) {\n try {\n const data = await this.github.getAuthenticatedUser();\n this.userData = data;\n } catch (e) {\n this.addError(e);\n }\n }\n this.subscriptionManager.notify(kUserManagerKey);\n }\n login = () => {\n this.oauthManager.login();\n }\n logout = () => {\n this.oauthManager.logout();\n this.github.setPat()\n }\n subscribe(fn) {\n this.subscriptionManager.subscribe(kUserManagerKey, fn);\n }\n unsubscribe(fn) {\n this.subscriptionManager.unsubscribe(kUserManagerKey, fn);\n }\n cleanup() {\n this.oauthManager.unsubscribe(this._handleNewAuth);\n }\n}\n\n","import React from 'react';\n\nimport EditLine from './EditLine.js';\n// import Footer from './Footer.js';\nimport {storageManager} from '../globals.js';\nimport GitHub from '../libs/GitHub.js';\nimport Head from './Head.js';\nimport Help from './Help.js';\nimport IDE from './IDE.js';\nimport Load from './Load.js';\nimport {isGistId, loadGistFromSrc} from '../libs/loader.js';\nimport {LogManager} from './Log.js';\nimport * as model from '../libs/model.js';\nimport Save from './Save.js';\nimport ServiceContext from '../ServiceContext.js';\nimport Settings from './Settings.js';\nimport Toolbar from './Toolbar.js';\nimport * as uiModel from '../libs/ui-model.js';\nimport UserManager from '../libs/UserManager.js';\nimport * as winMsgMgr from '../libs/WindowMessageManager';\nimport query from '../libs/start-query.js';\n\nimport './App.css';\nimport { classNames } from '../libs/css-utils.js';\n\nconst noJSX = () => [];\nconst darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');\n\nclass App extends React.Component {\n constructor(props) {\n super();\n this.state = {\n path: window.location.pathname,\n dark: darkMatcher.matches,\n fullscreen: !!query.fullscreen,\n loading: false,\n dialog: noJSX,\n gistId: '',\n messages: [],\n userData: {},\n updateVersion: 0,\n };\n this.github = new GitHub();\n this.oauthManager = props.oauthManager;\n this.backupManager = props.backupManager;\n this.logManager = new LogManager();\n this.userManager = new UserManager({\n oauthManager: this.oauthManager,\n github: this.github,\n addError: this.addError,\n });\n this.toolbarFns = {\n handleRun: this.handleRun,\n handleStop: this.handleStop,\n handleSave: this.handleSave,\n handleNew: this.handleNew,\n handleLoad: this.handleLoad,\n handleSettings: this.handleSettings,\n handleFullscreen: this.handleFullscreen,\n handleHelp: this.handleHelp,\n };\n }\n componentWillUnmount() {\n uiModel.unsubscribe(this.handleUIChange);\n this.userManager.cleanup();\n }\n componentDidMount() {\n uiModel.subscribe(this.handleUIChange);\n winMsgMgr.on('newGist', null, this.handleNewGist);\n this.github.addEventListener('userdata', (e) => {\n this.setState({\n userData: e.data,\n });\n });\n model.add('path', window.location.pathname);\n model.subscribe('path', (newValue) => {\n window.history.pushState({}, '', newValue);\n this.setState({\n path: newValue,\n });\n });\n // I still am not sure how I'm supposed to handle this.\n // Putting my model in the state itself seems wrong\n // and doesn't actually help since I'd have to \n // generate an entirely new state object to change any\n // nested property.\n //\n // Storing the data outside I see no way to tell\n // components to re-render except to call forceUpdate\n // which all the documentation says \"if you call this\n // you're doing it wrong\".\n //\n // Redux is a joke. 50 lines code needed to set\n // a single field. Repeat those 50 lines for every field.\n // Things like redux-tools make it less to type those\n // 50 lines but they still execute 50 to 500 lines of code\n // just to set a single value.\n model.subscribe(model.filesVersionKey, _ => {\n this.forceUpdate();\n });\n // this is a hack because I can't figure out how to\n // update the CodeMirror areas\n model.subscribe('updateVersion', _ => {\n this.setState({updateVersion: this.state.updateVersion + 1});\n });\n\n darkMatcher.addEventListener('change', () => {\n this.setState({dark: darkMatcher.matches});\n });\n\n if (query.newGist) {\n window.history.pushState({}, '', `${window.location.origin}`);\n window.opener.postMessage({type: 'gimmeDaCodez'}, '*');\n return;\n }\n\n const backup = this.backupManager.getBackup();\n let loaded = false;\n if (backup) {\n try {\n const data = JSON.parse(backup);\n if (data.href === window.location.href) {\n model.setData(data.data);\n const url = new URL(data.href);\n const {src} = Object.fromEntries(new URLSearchParams(url.search).entries());\n if (isGistId(src)) {\n this.setState({gistId: src, gistOwnerId: data.gistOwnerId});\n }\n loaded = true;\n this.addInfo('loaded backup from local storage')\n }\n } catch (e) {\n console.log('bad backup')\n }\n this.backupManager.clearBackup();\n }\n if (!loaded) {\n if (query.src) {\n this.loadData(query.src);\n }\n }\n this.updateTitle();\n }\n componentDidUpdate() {\n this.updateTitle();\n }\n updateTitle() {\n const data = model.getData();\n document.title = data.name || 'jsGist';\n }\n async loadData(src) {\n this.setState({loading: true});\n let success = true;\n let firstTry = true;\n for (;;) {\n try {\n const {data, id, rawData} = await loadGistFromSrc(src, this.github);\n model.setData(data);\n if (id) {\n this.setState({\n gistId: src,\n gistOwnerId: rawData?.owner?.id,\n });\n }\n break;\n } catch (e) {\n if (firstTry) {\n this.userManager.logout();\n firstTry = false;\n } else {\n success = false;\n console.warn(e);\n this.addError(`could not load jsGist: src=${src} ${e}`);\n break;\n }\n }\n }\n this.setState({loading: false});\n if (success) {\n this.handleRun();\n }\n }\n handleUIChange = () => {\n this.forceUpdate();\n }\n handleNewGist = (data) => {\n let success = true;\n try {\n model.setData(data);\n this.backupManager.clearBackup();\n } catch (e) {\n success = false;\n console.warn(e);\n this.addError(`could create new jsGist: ${e}`);\n }\n if (success) {\n this.handleRun();\n }\n };\n addMsg = (msg, className) => {\n switch (className) {\n case 'error':\n console.error(msg);\n break;\n default:\n console.log(msg);\n break;\n }\n this.setState({messages: [{msg: msg.toString(), className}, ...this.state.messages]});\n setTimeout(() => {\n this.setState({messages: this.state.messages.slice(0, this.state.messages.length - 1)});\n }, 5000);\n }\n addInfo = (msg) => this.addMsg(msg, 'info');\n addError = (msg) => this.addMsg(msg, 'error');\n closeDialog = () => {\n this.setState({dialog: noJSX});\n }\n registerRunnerAPI = (api) => {\n this.runnerAPI = api;\n this.handleStop();\n }\n handleNew = async() => {\n this.backupManager.clearBackup();\n window.location.href = window.location.origin; // causes a reload\n }\n handleRun = async () => {\n this.backupManager.setBackup(JSON.stringify({\n href: window.location.href,\n data: model.getData(),\n gistOwnerId: this.state.gistOwnerId,\n }));\n this.logManager.clear();\n console.clear();\n this.runnerAPI.run(model.getData());\n }\n handleStop = async () => {\n this.runnerAPI.run(model.getBlankData(), true);\n }\n handleSave = async () => {\n this.setState({dialog: this.renderSave});\n }\n handleSettings = () => {\n this.setState({dialog: this.renderSettings});\n }\n handleFullscreen = () => {\n this.setState({fullscreen: !this.state.fullscreen});\n }\n handleHelp = () => {\n this.setState({dialog: this.renderHelp});\n }\n handleLoad = () => {\n this.setState({dialog: this.renderLoad});\n }\n handleOnLoad = async() => {\n this.setState({dialog: noJSX});\n this.handleRun();\n }\n handleOnSave = (gistId) => {\n window.history.pushState({}, '', `${window.location.origin}?src=${gistId}`);\n this.setState({\n gistId,\n gistOwnerId: this.userManager.getUserData().id,\n });\n }\n handleAbort = () => {\n this.abort();\n };\n renderHelp = () => {\n return (\n \n
\n {/*\n \n
\n {\n !loading &&\n \n
\n \n
\n \n model.setName(v)} />\n {!!userData.name && }\n {!!userData.avatarURL && }\n
\n \n
\n \n
\n }\n \n {\n this.state.messages.map(({msg, className}, i) => (
\n \n \n );\n }\n}\n\nexport default App;\n","const backupKey = 'backup';\r\n\r\nexport default class BackupManager {\r\n #storageManager;\r\n\r\n constructor(storageManager) {\r\n this.#storageManager = storageManager;\r\n }\r\n getBackup() {\r\n return this.#storageManager.get(backupKey);\r\n }\r\n setBackup(data) {\r\n this.#storageManager.set(backupKey, data);\r\n }\r\n clearBackup() {\r\n this.#storageManager.delete(backupKey);\r\n }\r\n}","\nimport {clientId} from '../globals.js';\nimport {createURL} from './url.js';\nimport {createPopup} from './utils';\nimport StorageManager from './StorageManager';\nimport * as winMsgMgr from './WindowMessageManager';\n\nconst patKey = 'pat';\n\nconst getTokenURL = process.env.REACT_APP_OAUTH_HELPER_URL;\nif (!getTokenURL) {\n throw Error ('must set environment variable: OAUTH_HELPER_URL');\n}\n\nexport default class OAuthManager {\n private _popup?: Window;\n private _state?: string;\n private _storageManager: StorageManager;\n\n constructor(storageManager: StorageManager) {\n this._popup = undefined;\n this._state = undefined; // last state sent to auth\n this._storageManager = storageManager;\n winMsgMgr.on('auth', null, (data: any) => {\n this._closePopup();\n if (data.state === this._state) {\n this.requestToken(data);\n }\n });\n }\n // TODO: rename this and decide if Github should be connected\n pat() {\n return this._storageManager.get(patKey);\n }\n subscribe(fn: () => void) {\n this._storageManager.subscribe(patKey, fn);\n }\n unsubscribe(fn: () => void) {\n this._storageManager.unsubscribe(patKey, fn);\n }\n _closePopup() {\n if (this._popup) {\n this._popup.close();\n this._popup = undefined;\n }\n }\n requestToken = async (auth: any) => {\n try {\n const params = {\n client: clientId,\n code: auth.code,\n };\n const url = createURL(getTokenURL, params);\n const req = await fetch(url);\n const data = await req.json();\n if (!data.access_token) {\n throw new Error(JSON.stringify(data));\n }\n this._storageManager.set(patKey, data.access_token);\n } catch (e) {\n console.error(e);\n }\n }\n logout = () => {\n this._storageManager.delete(patKey);\n }\n login = () => {\n this._closePopup();\n this._state = `${Date.now()}-${Math.random()}`; // does this need to special? Seems like no\n const url = createURL('https://github.com/login/oauth/authorize', {\n client_id: clientId,\n scope: 'gist',\n state: this._state,\n });\n this._popup = createPopup(url);\n }\n}","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' },\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then(registration => {\n registration.unregister();\n })\n .catch(error => {\n console.error(error.message);\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport {storageManager} from './globals.js';\nimport './index.css';\nimport './scrollbars.js';\nimport App from './components/App';\nimport BackupManager from './components/BackupManager.js';\nimport OAuthManager from './libs/OAuthManager';\nimport * as serviceWorker from './serviceWorker';\n\nconst oauthManager = new OAuthManager(storageManager);\nconst backupManager = new BackupManager(storageManager);\n\nReactDOM.render(\n {msg}
))\n }\n | Source type + * | Width + * | Height + * |
|---|---|---|
| {@link ImageBitmap} + * | {@link ImageBitmap#width|ImageBitmap.width} + * | {@link ImageBitmap#height|ImageBitmap.height} + * |
| {@link HTMLVideoElement} + * | video/intrinsic width|intrinsic width of the frame + * | video/intrinsic height|intrinsic height of the frame + * |
| {@link VideoFrame} + * | {@link VideoFrame#codedWidth|VideoFrame.codedWidth} + * | {@link VideoFrame#codedHeight|VideoFrame.codedHeight} + * |
| {@link HTMLCanvasElement} + * | {@link HTMLCanvasElement#width|HTMLCanvasElement.width} + * | {@link HTMLCanvasElement#height|HTMLCanvasElement.height} + * |
| {@link OffscreenCanvas} + * | {@link OffscreenCanvas#width|OffscreenCanvas.width} + * | {@link OffscreenCanvas#height|OffscreenCanvas.height} + * |
+ * Note:
+ * Adding a format to this list may have a significant performance impact, so it is best
+ * to avoid adding formats unnecessarily.
+ * The actual performance impact is highly dependent on the target system; developers must
+ * test various systems to find out the impact on their particular application.
+ * For example, on some systems any texture with a {@link GPUTextureDescriptor#format} or
+ * {@link GPUTextureDescriptor#viewFormats} entry including
+ * {@link GPUTextureFormat#"rgba8unorm-srgb"} will perform less optimally than a
+ * {@link GPUTextureFormat#"rgba8unorm"} texture which does not.
+ * Similar caveats exist for other formats and pairs of formats on other systems.
+ *
+ * Formats in this list must be texture view format compatible with the texture format.
+ *
+ * Two {@link GPUTextureFormat}s `format` and `viewFormat` are texture view format compatible if:
+ * - `format` equals `viewFormat`, or
+ * - `format` and `viewFormat` differ only in whether they are `srgb` formats (have the `-srgb` suffix).
+ *
+ */
+ viewFormats?: IterableEditorial:
+ * At the time of this writing, no language/direction recommendation is available that provides
+ * compatibility and consistency with legacy APIs, but when there is, adopt it formally.
+ */
+ readonly message: string;
+ /**
+ * The severity level of the message.
+ * If the {@link GPUCompilationMessage#type} is {@link GPUCompilationMessageType#"error"}, it
+ * corresponds to a shader-creation error.
+ */
+ readonly type: GPUCompilationMessageType;
+ /**
+ * The line number in the shader {@link GPUShaderModuleDescriptor#code} the
+ * {@link GPUCompilationMessage#message} corresponds to. Value is one-based, such that a lineNum of
+ * `1` indicates the first line of the shader {@link GPUShaderModuleDescriptor#code}. Lines are
+ * delimited by line breaks.
+ * If the {@link GPUCompilationMessage#message} corresponds to a substring this points to
+ * the line on which the substring begins. Must be `0` if the {@link GPUCompilationMessage#message}
+ * does not correspond to any specific point in the shader {@link GPUShaderModuleDescriptor#code}.
+ */
+ readonly lineNum: number;
+ /**
+ * The offset, in UTF-16 code units, from the beginning of line {@link GPUCompilationMessage#lineNum}
+ * of the shader {@link GPUShaderModuleDescriptor#code} to the point or beginning of the substring
+ * that the {@link GPUCompilationMessage#message} corresponds to. Value is one-based, such that a
+ * {@link GPUCompilationMessage#linePos} of `1` indicates the first code unit of the line.
+ * If {@link GPUCompilationMessage#message} corresponds to a substring this points to the
+ * first UTF-16 code unit of the substring. Must be `0` if the {@link GPUCompilationMessage#message}
+ * does not correspond to any specific point in the shader {@link GPUShaderModuleDescriptor#code}.
+ */
+ readonly linePos: number;
+ /**
+ * The offset from the beginning of the shader {@link GPUShaderModuleDescriptor#code} in UTF-16
+ * code units to the point or beginning of the substring that {@link GPUCompilationMessage#message}
+ * corresponds to. Must reference the same position as {@link GPUCompilationMessage#lineNum} and
+ * {@link GPUCompilationMessage#linePos}. Must be `0` if the {@link GPUCompilationMessage#message}
+ * does not correspond to any specific point in the shader {@link GPUShaderModuleDescriptor#code}.
+ */
+ readonly offset: number;
+ /**
+ * The number of UTF-16 code units in the substring that {@link GPUCompilationMessage#message}
+ * corresponds to. If the message does not correspond with a substring then
+ * {@link GPUCompilationMessage#length} must be 0.
+ */
+ readonly length: number;
+}
+
+declare var GPUCompilationMessage: {
+ prototype: GPUCompilationMessage;
+ new (): never;
+};
+
+interface GPUComputePassEncoder
+ extends GPUObjectBase,
+ GPUCommandsMixin,
+ GPUDebugCommandsMixin,
+ GPUBindingCommandsMixin {
+ /**
+ * Nominal type branding.
+ * https://github.com/microsoft/TypeScript/pull/33038
+ * @internal
+ */
+ readonly __brand: "GPUComputePassEncoder";
+ /**
+ * Sets the current {@link GPUComputePipeline}.
+ * @param pipeline - The compute pipeline to use for subsequent dispatch commands.
+ */
+ setPipeline(
+ pipeline: GPUComputePipeline
+ ): undefined;
+ /**
+ * Dispatch work to be performed with the current {@link GPUComputePipeline}.
+ * See [[#computing-operations]] for the detailed specification.
+ * @param workgroupCountX - X dimension of the grid of workgroups to dispatch.
+ * @param workgroupCountY - Y dimension of the grid of workgroups to dispatch.
+ * @param workgroupCountZ - Z dimension of the grid of workgroups to dispatch.
+ */
+ dispatchWorkgroups(
+ workgroupCountX: GPUSize32,
+ workgroupCountY?: GPUSize32,
+ workgroupCountZ?: GPUSize32
+ ): undefined;
+ /**
+ * Dispatch work to be performed with the current {@link GPUComputePipeline} using parameters read
+ * from a {@link GPUBuffer}.
+ * See [[#computing-operations]] for the detailed specification.
+ * packed block of **three 32-bit unsigned integer values (12 bytes total)**,
+ * given in the same order as the arguments for {@link GPUComputePassEncoder#dispatchWorkgroups}.
+ * For example:
+ * @param indirectBuffer - Buffer containing the indirect dispatch parameters.
+ * @param indirectOffset - Offset in bytes into `indirectBuffer` where the dispatch data begins.
+ */
+ dispatchWorkgroupsIndirect(
+ indirectBuffer: GPUBuffer,
+ indirectOffset: GPUSize64
+ ): undefined;
+ /**
+ * Completes recording of the compute pass commands sequence.
+ */
+ end(): undefined;
+}
+
+declare var GPUComputePassEncoder: {
+ prototype: GPUComputePassEncoder;
+ new (): never;
+};
+
+interface GPUComputePipeline
+ extends GPUObjectBase,
+ GPUPipelineBase {
+ /**
+ * Nominal type branding.
+ * https://github.com/microsoft/TypeScript/pull/33038
+ * @internal
+ */
+ readonly __brand: "GPUComputePipeline";
+}
+
+declare var GPUComputePipeline: {
+ prototype: GPUComputePipeline;
+ new (): never;
+};
+
+interface GPUDevice
+ extends EventTarget,
+ GPUObjectBase {
+ /**
+ * Nominal type branding.
+ * https://github.com/microsoft/TypeScript/pull/33038
+ * @internal
+ */
+ readonly __brand: "GPUDevice";
+ /**
+ * A set containing the {@link GPUFeatureName} values of the features
+ * supported by the device (i.e. the ones with which it was created).
+ */
+ readonly features: GPUSupportedFeatures;
+ /**
+ * Exposes the limits supported by the device
+ * (which are exactly the ones with which it was created).
+ */
+ readonly limits: GPUSupportedLimits;
+ /**
+ * The primary {@link GPUQueue} for this device.
+ */
+ readonly queue: GPUQueue;
+ /**
+ * Destroys the device, preventing further operations on it.
+ * Outstanding asynchronous operations will fail.
+ * Note: It is valid to destroy a device multiple times.
+ */
+ destroy(): undefined;
+ /**
+ * Creates a {@link GPUBuffer}.
+ * @param descriptor - Description of the {@link GPUBuffer} to create.
+ */
+ createBuffer(
+ descriptor: GPUBufferDescriptor
+ ): GPUBuffer;
+ /**
+ * Creates a {@link GPUTexture}.
+ * @param descriptor - Description of the {@link GPUTexture} to create.
+ */
+ createTexture(
+ descriptor: GPUTextureDescriptor
+ ): GPUTexture;
+ /**
+ * Creates a {@link GPUSampler}.
+ * @param descriptor - Description of the {@link GPUSampler} to create.
+ */
+ createSampler(
+ descriptor?: GPUSamplerDescriptor
+ ): GPUSampler;
+ /**
+ * Creates a {@link GPUExternalTexture} wrapping the provided image source.
+ * @param descriptor - Provides the external image source object (and any creation options).
+ */
+ importExternalTexture(
+ descriptor: GPUExternalTextureDescriptor
+ ): GPUExternalTexture;
+ /**
+ * Creates a {@link GPUBindGroupLayout}.
+ * @param descriptor - Description of the {@link GPUBindGroupLayout} to create.
+ */
+ createBindGroupLayout(
+ descriptor: GPUBindGroupLayoutDescriptor
+ ): GPUBindGroupLayout;
+ /**
+ * Creates a {@link GPUPipelineLayout}.
+ * @param descriptor - Description of the {@link GPUPipelineLayout} to create.
+ */
+ createPipelineLayout(
+ descriptor: GPUPipelineLayoutDescriptor
+ ): GPUPipelineLayout;
+ /**
+ * Creates a {@link GPUBindGroup}.
+ * @param descriptor - Description of the {@link GPUBindGroup} to create.
+ */
+ createBindGroup(
+ descriptor: GPUBindGroupDescriptor
+ ): GPUBindGroup;
+ /**
+ * Creates a {@link GPUShaderModule}.
+ * @param descriptor - Description of the {@link GPUShaderModule} to create.
+ */
+ createShaderModule(
+ descriptor: GPUShaderModuleDescriptor
+ ): GPUShaderModule;
+ /**
+ * Creates a {@link GPUComputePipeline} using immediate pipeline creation.
+ * @param descriptor - Description of the {@link GPUComputePipeline} to create.
+ */
+ createComputePipeline(
+ descriptor: GPUComputePipelineDescriptor
+ ): GPUComputePipeline;
+ /**
+ * Creates a {@link GPURenderPipeline} using immediate pipeline creation.
+ * @param descriptor - Description of the {@link GPURenderPipeline} to create.
+ */
+ createRenderPipeline(
+ descriptor: GPURenderPipelineDescriptor
+ ): GPURenderPipeline;
+ /**
+ * Creates a {@link GPUComputePipeline} using async pipeline creation.
+ * The returned {@link Promise} resolves when the created pipeline
+ * is ready to be used without additional delay.
+ * If pipeline creation fails, the returned {@link Promise} rejects with an {@link GPUPipelineError}.
+ * Note: Use of this method is preferred whenever possible, as it prevents blocking the
+ * queue timeline work on pipeline compilation.
+ * @param descriptor - Description of the {@link GPUComputePipeline} to create.
+ */
+ createComputePipelineAsync(
+ descriptor: GPUComputePipelineDescriptor
+ ): Promise Editorial:
+ * At the time of this writing, no language/direction recommendation is available that provides
+ * compatibility and consistency with legacy APIs, but when there is, adopt it formally.
+ */
+ readonly message: string;
+}
+
+declare var GPUError: {
+ prototype: GPUError;
+ new (): never;
+};
+
+interface GPUExternalTexture
+ extends GPUObjectBase {
+ /**
+ * Nominal type branding.
+ * https://github.com/microsoft/TypeScript/pull/33038
+ * @internal
+ */
+ readonly __brand: "GPUExternalTexture";
+}
+
+declare var GPUExternalTexture: {
+ prototype: GPUExternalTexture;
+ new (): never;
+};
+
+interface GPUInternalError
+ extends GPUError {
+ /**
+ * Nominal type branding.
+ * https://github.com/microsoft/TypeScript/pull/33038
+ * @internal
+ */
+ readonly __brand: "GPUInternalError";
+}
+
+declare var GPUInternalError: {
+ prototype: GPUInternalError;
+ new (
+ message: string
+ ): GPUInternalError;
+};
+
+interface GPUOutOfMemoryError
+ extends GPUError {
+ /**
+ * Nominal type branding.
+ * https://github.com/microsoft/TypeScript/pull/33038
+ * @internal
+ */
+ readonly __brand: "GPUOutOfMemoryError";
+}
+
+declare var GPUOutOfMemoryError: {
+ prototype: GPUOutOfMemoryError;
+ new (
+ message: string
+ ): GPUOutOfMemoryError;
+};
+
+interface GPUPipelineError
+ extends DOMException {
+ /**
+ * Nominal type branding.
+ * https://github.com/microsoft/TypeScript/pull/33038
+ * @internal
+ */
+ readonly __brand: "GPUPipelineError";
+ /**
+ * A read-only slot-backed attribute exposing the type of error encountered in pipeline creation
+ * as a GPUPipelineErrorReason:
+ *
+ * - "validation": A [$validation error$].
+ * - "internal": An [$internal error$].
+ *
+ */
+ readonly reason: GPUPipelineErrorReason;
+}
+
+declare var GPUPipelineError: {
+ prototype: GPUPipelineError;
+ new (
+ message:
+ | string
+ | undefined,
+ options: GPUPipelineErrorInit
+ ): GPUPipelineError;
+};
+
+interface GPUPipelineLayout
+ extends GPUObjectBase {
+ /**
+ * Nominal type branding.
+ * https://github.com/microsoft/TypeScript/pull/33038
+ * @internal
+ */
+ readonly __brand: "GPUPipelineLayout";
+}
+
+declare var GPUPipelineLayout: {
+ prototype: GPUPipelineLayout;
+ new (): never;
+};
+
+interface GPUQuerySet
+ extends GPUObjectBase {
+ /**
+ * Nominal type branding.
+ * https://github.com/microsoft/TypeScript/pull/33038
+ * @internal
+ */
+ readonly __brand: "GPUQuerySet";
+ /**
+ * Destroys the {@link GPUQuerySet}.
+ */
+ destroy(): undefined;
+ /**
+ * The type of the queries managed by this {@link GPUQuerySet}.
+ */
+ readonly type: GPUQueryType;
+ /**
+ * The number of queries managed by this {@link GPUQuerySet}.
+ */
+ readonly count: GPUSize32Out;
+}
+
+declare var GPUQuerySet: {
+ prototype: GPUQuerySet;
+ new (): never;
+};
+
+interface GPUQueue
+ extends GPUObjectBase {
+ /**
+ * Nominal type branding.
+ * https://github.com/microsoft/TypeScript/pull/33038
+ * @internal
+ */
+ readonly __brand: "GPUQueue";
+ /**
+ * Schedules the execution of the command buffers by the GPU on this queue.
+ * Submitted command buffers cannot be used again.
+ * `commandBuffers`:
+ */
+ submit(
+ commandBuffers: Iterable