\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 area.
\n\n
\n {makeSnippet(data, asModule)}\n \n \n
\n HTML (copy the code below paste into a file)
\n\n
\n this.onChange(true)}/>
\n this.onChange(false)}/>
\n \n
\n {makeHTML(data, asModule)}\n \n \n \n
\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 window.open('/?newGist=1', '_blank');\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}","import React from 'react';\n\nexport default class Dialog extends React.Component {\n componentDidMount() {\n window.addEventListener('keydown', this.handleKeyDown);\n }\n componentWillUnmount() {\n window.removeEventListener('keydown', this.handleKeyDown);\n }\n handleKeyDown = (e) => {\n if (e.keyCode === 27) {\n this.props.onClose();\n }\n }\n render() {\n const {title, children, onClose, className = ''} = this.props;\n return (\n ![\"logo\"/](\"/resources/images/logo-small.svg\"){kind=logo}
\n {window.location.hostname}\n
\n \n \n ![\"github\"](\"/resources/images/octocat-icon.svg\"/)
\n \n
\n \n \n \n {e.stopPropagation()}}\n >\n
\n \n );\n }\n}\n","import React from 'react';\nimport Dialog from './Dialog.js';\n\nexport default function Help(props) {\n const {onClose} = props;\n return (\n \n );\n}","const camelCaseRE = /([a-z])([A-Z])/g;\nconst toDash = (_, left, right) => `${left}-${right}`;\nconst camelCaseToDash = s => s.replace(camelCaseRE, toDash).toLowerCase();\n\nexport function classNames(...args) {\n const names = [];\n for (const arg of args) {\n if (typeof arg === 'string') {\n names.push(arg);\n } else {\n for (const [key, value] of Object.entries(arg)) {\n if (value) {\n names.push(camelCaseToDash(key));\n }\n }\n }\n }\n return names.join(' ');\n}","import React from 'react';\n\nconst ServiceContext = React.createContext();\nexport default ServiceContext;\n","import React from 'react';\n\nimport {classNames} from '../libs/css-utils';\nimport ServiceContext from '../ServiceContext.js';\n\nfunction basename(url) {\n const ndx = url.lastIndexOf('/');\n return ndx >= 0 ? url.substr(ndx + 1) : url;\n}\n\nfunction isMsgSame(oldMsg, newMsg) {\n if (!!oldMsg !== !!newMsg) {\n return false;\n }\n const keys = Object.keys(oldMsg).filter(key => key !== 'count');\n if (keys.length !== Object.keys(newMsg).length) {\n return false;\n }\n for (const key of keys) {\n if (oldMsg[key] !== newMsg[key]) {\n return false;\n }\n }\n return true;\n}\n\nexport class LogManager extends EventTarget {\n constructor() {\n super();\n this._msgs = [];\n }\n _notify() {\n this.dispatchEvent(new Event('change'));\n }\n clear = () => {\n this._msgs = [];\n this._notify();\n }\n _addMsg = (data) => {\n const lastData = this._msgs[this._msgs.length - 1];\n if (isMsgSame(lastData, data)) {\n lastData.count = (lastData.count || 0) + 1;\n } else {\n this._msgs.push(data);\n }\n }\n addMsg = (data) => {\n this._addMsg(data);\n this._notify();\n }\n addMsgs = (msgs) => {\n for (const {type, data} of msgs) {\n switch (type) {\n case 'jsError':\n this._addMsg({...data, type: 'error', showStack: true});\n break;\n case 'jsUnhandledRejection':\n this._addMsg({...data, type: 'error', showStack: true});\n break;\n default:\n this._addMsg(data);\n break;\n }\n }\n this._notify();\n }\n getMsgs() {\n return this._msgs\n }\n}\n\nexport default class Log extends React.Component {\n constructor(props) {\n super(props);\n this.logMessagesRef = React.createRef();\n }\n handleChange = () => {\n this.forceUpdate();\n }\n componentDidMount() {\n const {logManager} = this.context;\n logManager.addEventListener('change', this.handleChange);\n }\n componentWillUnmount() {\n const {logManager} = this.context;\n logManager.removeEventListener('change', this.handleChange);\n }\n componentDidUpdate(prevProps, prevState, snapshot) {\n if (snapshot !== null) {\n // if we were at the bottom of the log then\n // stay at the bottom of the log\n if (snapshot < 1) {\n const elem = this.logMessagesRef.current;\n elem.scrollTop = elem.scrollHeight - elem.parentElement.clientHeight;\n }\n }\n }\n getSnapshotBeforeUpdate(prevProps, prevState) {\n const elem = this.logMessagesRef.current;\n return elem.scrollHeight - (elem.scrollTop + elem.parentElement.clientHeight);\n }\n render() {\n const {onGoToLine} = this.props;\n const {logManager} = this.context;\n return (\n \n
\n {title}
\n \n \n
\n \n {children}\n
\n \n
\n \n );\n }\n}\n\nLog.contextType = ServiceContext;","export function createURL(base, params) {\n const url = new URL(base);\n const searchParams = new URLSearchParams(url.search);\n for (const [key, value] of Object.entries(params)) {\n if (value === undefined) {\n searchParams.delete(key);\n } else {\n searchParams.set(key, value);\n }\n }\n url.search = searchParams.toString();\n return url.href;\n}\n\nexport function updateURL(params) {\n const url = createURL(window.location.href, params);\n window.history.replaceState({}, '', url.href);\n}\n\n","type Handler = (data: any) => void;\ntype StringToHandlers = Map\n { logManager.getMsgs().map((msg, ndx) => {\n const tooltip = !msg.section;\n return (\n
\n );\n })}\n \n
\n {msg.count ? msg.count : ''}
\n \n {msg.msg}\n {/* this is to prevent auto-selection to the next element when double clicking */}\n onGoToLine(msg)}\n data-tooltip={`${msg.section || msg.url}:${msg.lineNo}`}\n >\n {msg.section || basename(msg.url || '')}:{msg.lineNo}\n
\n \n
\n );\n};\n","import mime from 'mime-types';\nimport React from 'react';\nimport CodeArea from './CodeArea.js';\n\nexport default class File extends React.Component {\n componentDidMount() {\n const {register} = this.props;\n register(this, {\n goToLine: (data) => {\n const {title} = this.props;\n if (data.section === title) {\n this.codeAPI.goToLine(data.lineNo, data.colNo);\n return true;\n }\n },\n refresh: _ => this.codeAPI.refresh(),\n focus: _ => this.codeAPI.focus(),\n });\n }\n componentWillUnmount() {\n const {unregister} = this.props;\n unregister(this);\n }\n handleRegisterAPI = (api) => {\n this.codeAPI = api;\n }\n render() {\n const props = this.props;\n const {title, hackKey} = props;\n const heading = (\n \n {heading}\n
\n \n
\n {title}
\n );\n const mimeType = mime.lookup(title) || (title.toLowerCase() === 'javascript' ? 'application/javascript' : 'application/octet-stream');\n const options = {\n ...props.options,\n editor: {\n ...(props.options?.editor && props.options.editor),\n mode: mimeType,\n },\n };\n return (\n {title}
\n \n \n {\n data.files.map((file, ndx) => {\n return (\n model.setFileName(ndx, name)}\n onValueChange={value => model.setFileContent(ndx, value)}\n register={this.handleRegister}\n unregister={this.handleUnregister}\n extra={extra}\n />\n );\n })\n }\n \n
\n );\n }\n}\n\n// {/**/}\n","import Ajv from 'ajv';\nimport React from 'react';\nimport Split from 'react-split-it';\n\nimport Files from './Files.js';\nimport Log from './Log.js';\nimport Runner from './Runner.js';\nimport * as uiModel from '../libs/ui-model.js';\n\nconst kUIStateKey = 'layout3Vertical';\n\nconst uiStateSchema = {\n \"type\": \"object\",\n \"properties\": {\n \"hSizes:\": { \"type\": \"array\", \"items\": {\"type\": \"number\"}, \"minItems\": 2},\n \"vSizes:\": { \"type\": \"array\", \"items\": {\"type\": \"number\"}, \"minItems\": 2},\n },\n \"required\": [\"hSizes\", \"vSizes\"],\n};\nconst ajv = new Ajv() // options can be passed, e.g. {allErrors: true}\nconst uiStateValidator = ajv.compile(uiStateSchema);\n\nexport default class Layout3Vertical extends React.Component {\n constructor(props) {\n super(props);\n const state = uiModel.get()[kUIStateKey];\n this.state = uiStateValidator(state) ? state : {\n hSizes: [0.5, 0.5],\n vSizes: [0.9, 0.1],\n };\n }\n onSetVSizes = (sizes) => {\n this.setState({vSizes: sizes});\n uiModel.set(kUIStateKey, this.state);\n }\n onSetHSizes = (sizes) => {\n this.setState({hSizes: sizes});\n uiModel.set(kUIStateKey, this.state);\n }\n registerFilesAPI = (api) => {\n this.filesAPI = api;\n }\n handleGoToLine = (data) => {\n this.filesAPI.goToLine(data);\n }\n render() {\n const {hackKey, data, registerRunnerAPI} = this.props;\n const {vSizes, hSizes} = this.state;\n return (\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n );\n };\n}","import React from 'react';\n\nimport Layout1 from './Layout1.js';\nimport Layout3Vertical from './Layout3Vertical.js';\nimport Layout3Horizontal from './Layout3Horizontal.js';\nimport Layout2x2 from './Layout2x2.js';\nimport LayoutTabbed from './LayoutTabbed.js';\n\nimport * as uiModel from '../libs/ui-model.js';\n\nconst layoutModes = [\n Layout3Vertical,\n Layout3Horizontal,\n Layout2x2,\n LayoutTabbed,\n];\n\nexport default class IDE extends React.Component {\n componentDidMount() {\n uiModel.subscribe(this.handleChange);\n }\n componentWillUnmount() {\n uiModel.unsubscribe(this.handleChange);\n }\n handleChange = () => {\n this.forceUpdate();\n }\n render() {\n const {fullscreen} = this.props;\n const mode = uiModel.get().layout;\n const layoutMode = fullscreen ? Layout1 : layoutModes[mode]\n return React.createElement(layoutMode, this.props);\n }\n}\n\n","import Ajv from 'ajv';\nimport * as model from './model.js';\nimport {storageManager} from '../globals.js';\nconst gistsKey = 'gists';\n\nconst gistSchema = {\n \"type\": \"object\",\n \"properties\": {\n \"name\": { \"type\": \"string\" },\n \"date\": { \"type\": \"string\" },\n \"locallySaved\": { \"type\": \"boolean\" },\n },\n \"required\": [\"name\", \"date\"],\n};\n\nconst gistsSchema = {\n \"$schema\": \"http://json-schema.org/schema#\",\n \"type\": \"object\",\n \"additionalProperties\": gistSchema,\n};\nconst ajv = new Ajv() // options can be passed, e.g. {allErrors: true}\nconst gistsValidator = ajv.compile(gistsSchema);\nconst gistValidator = ajv.compile(gistSchema);\n\nfunction getStoredGists() {\n try {\n const gists = JSON.parse(storageManager.get(gistsKey));\n if (!gistsValidator(gists)) {\n storageManager.delete(gistsKey);\n throw new Error();\n }\n return gists;\n } catch(e) {\n return {};\n }\n}\n\nmodel.add('gists', getStoredGists());\n\n// does this need to be centralized?\nstorageManager.subscribe(gistsKey, () => {\n model.set('gists', getStoredGists());\n});\n\nexport function addGist(id, name, date, _public) {\n const gist = {name, date, public: _public, locallySaved: true};\n if (!gistValidator(gist)) {\n throw new Error(`gist not valid:\\n${gistValidator.errors.map(e => `${e.message}: ${e.dataPath}`)}`)\n }\n const gists = {...model.get('gists')};\n gists[id] = gist;\n model.set('gists', gists);\n saveGistsToLocalStorage(gists);\n}\n\nexport function removeGist(id) {\n const gists = {...model.get('gists')};\n delete gists[id];\n model.set('gists', gists);\n saveGistsToLocalStorage(gists);\n}\n\nfunction saveGistsToLocalStorage(gists) {\n // send to other windows\n storageManager.set(gistsKey, JSON.stringify(gists));\n}\n\nexport function getGists() {\n return model.get('gists');\n}\n\nexport function setGists(gists) {\n if (!gistsValidator(gists)) {\n throw new Error(`gists not valid:\\n${gistValidator.errors.map(e => `${e.message}: ${e.dataPath}`)}`)\n }\n model.set('gists', gists);\n saveGistsToLocalStorage(gists);\n}\n\nexport function subscribe(fn) {\n model.subscribe('gists', fn);\n}\n\nexport function unsubscribe(fn) {\n model.unsubscribe('gists', fn);\n}\n","import React from 'react';\nimport EditLine from './EditLine.js';\nimport {classNames} from '../libs/css-utils.js';\nimport * as gists from '../libs/gists.js';\nimport ServiceContext from '../ServiceContext.js';\n\ntype Gist = {\n name: string,\n date: string,\n public: boolean,\n locallySaved?: boolean,\n id: string,\n}\n\n// ( ) Wrap table with div, scroll div. Because table expands to 100%\n\ninterface GistIdMap {\n [key: string]: Gist;\n} \n\ntype LoadGistState = {\n loading: boolean,\n gists: GistIdMap,\n checks: Set\n
\n \n {\n data.files.map((file, ndx) => {\n const key = `ca${this.getFileKey(file)}`;\n return (\n \n this.handleOnChange(ndx)}\n onChange={_ => _} /* this is to shut up react */\n />\n \n \n );\n })\n }\n
\n \n {\n data.files.map((file, ndx) => {\n const key = `ca${this.getFileKey(file)}`;\n return (\n
\n \n model.setFileName(ndx, name)}\n onValueChange={value => model.setFileContent(ndx, value)}\n register={this.handleRegister}\n unregister={this.handleUnregister}\n />\n
\n );\n })\n }\n \n Login with github\n
\n );\n }\n renderLoad() {\n const {userManager} = this.context;\n const {gists, checks, loading, filter, sortKey, sortDir, shift} = this.state;\n const userData = userManager.getUserData();\n const canLoad = !!userData && !loading;\n const gistArray = gistsToSortedArray(gists, checks, sortKey, sortDir);\n return (\n \n \n \n }\n
\n );\n }\n render() {\n const {userManager} = this.context;\n const userData = userManager.getUserData();\n return userData ? this.renderLoad() : this.renderLogin();\n }\n}\n\nLoadGist.contextType = ServiceContext;\n","import React, {useContext, useState} from 'react';\nimport Code from './Code.js';\nimport * as model from '../libs/model.js';\nimport ServiceContext from '../ServiceContext.js';\n\nexport default function LoadJSON(props) {\n const [json, setJSON] = useState('');\n const {addError} = useContext(ServiceContext);\n function load() {\n const {onLoad} = props;\n try {\n const data = JSON.parse(json);\n model.setData(data);\n onLoad();\n } catch (e) {\n addError(`bad json: ${e}`);\n }\n }\n return (\n \n
\n
\n \n \n
\n
\n \n | this.toggleCheck(gist.id)}/> | \n{gist.name} | \n{gist.date.substring(0, 10)} | \n{gist.public ? '' : '🔒'} | \n
\n
\n )\n}","import React, {useContext, useState} from 'react';\nimport EditLine from './EditLine';\nimport * as model from '../libs/model.js';\nimport ServiceContext from '../ServiceContext.js';\n\nexport default function LoadURL(props) {\n const [url, setUrl] = useState('');\n const {addError} = useContext(ServiceContext);\n async function loadUrl() {\n const {onLoad} = props;\n try {\n const req = await fetch(url);\n const data = await req.json();\n model.setData(data);\n onLoad()\n } catch(e) {\n addError(`could not load url: ${e}`);\n }\n } \n return (\n \n
\n \n \n
\n\n
\n )\n}","import React from 'react';\n\nexport default function Section(props) {\n const {heading, children} = props;\n return (\n \n \n
\n\n
\n );\n}","import React from 'react';\nimport Dialog from './Dialog.js';\nimport LoadGist from './LoadGist';\nimport LoadJSON from './LoadJSON.js';\nimport LoadURL from './LoadURL.js';\nimport Section from './Section.js';\n\nexport default function Load(props) {\n const {data, onLoad, onClose} = props;\n return (\n \n )\n}\n","import {decode, encode} from 'base64-arraybuffer';\nimport {inflate, deflate} from 'uzip-module';\n\nconst utf8Encoder = new TextEncoder();\nconst utf8Decoder = new TextDecoder();\nconst compressedPrefix = 'cb64,';\nconst uncompressedPrefix = 'b64,';\n\nexport const isCompressedBase64 = s => s.startsWith(compressedPrefix) || s.startsWith(uncompressedPrefix);\nexport function compressedBase64ToJSON(src) {\n const isCompressed = src.startsWith(compressedPrefix);\n const prefix = isCompressed ? compressedPrefix : uncompressedPrefix;\n const base64 = src.substr(prefix.length)\n .replace(/-/g, '+')\n .replace(/_/g, '/');\n const raw = new Uint8Array(decode(base64));\n const bin = isCompressed \n ? inflate(raw)\n : raw;\n const json = utf8Decoder.decode(bin);\n return JSON.parse(json);\n}\n\nexport function jsonToCompressedBase64(data) {\n const json = JSON.stringify(data);\n const bin = utf8Encoder.encode(json);\n const compressed = deflate(bin);\n const useCompressed = compressed.length < bin.length;\n const base64 = encode(useCompressed ? compressed : bin)\n .replace(/\\+/g, '-') // better for URLs because + and / have to be escaped\n .replace(/\\//g, '_');\n const prefix = useCompressed ? compressedPrefix : uncompressedPrefix;\n return `${prefix}${base64}`;\n}\n","\nimport {isCompressedBase64, compressedBase64ToJSON} from './compression.js';\n\nconst idRE = /^[a-z0-9]+$/i;\nexport const isGistId = s => idRE.test(s);\n\nexport async function loadGistFromSrc(src, github) {\n if (isGistId(src)) {\n const {data, rawData} = await github.getGist(src);\n return {data, id: src, rawData};\n } else if (isCompressedBase64(src)) {\n return {data: compressedBase64ToJSON(src)};\n } else {\n const res = await fetch(src);\n const data = await res.json();\n return {data};\n }\n}\n","import React from 'react';\n\nexport default function Embed(props) {\n const {gistId} = props;\n const exampleId = gistId || 'f793cb359f2571409983351a6099d5d1';\n return (\n {heading}
\n \n {children}\n
\n \n
\n );\n}","import React from 'react';\n\nimport {escapeTextForHTMLContent, getOrFind} from '../libs/utils';\n\n/*\n\n\n\n\n\n console.log();\n\n\n\n h1 { color: red; }\n\n\n\n \n \n \n }\n
\n \n You can embed a jsGist by creating an iframe pointing to\n {' '}https://jsgist.org/embed.html?src=<src>{' '} where\n {' '}<src>{' '} is one of the forms above. Either\n {' '}?src=<gist_id>{' '}or\n {' '}?src=<base64url>{' '}or\n {' '}?src=<url_to_json>{' '}.\n You can also add {' '}noheader=true{' '} if you don't want the header\n to appear. You can also just run them directly rather\n than put in an iframe. [example]{' '}\n [example no header]\n
\n For example to embed the current gist:\n
\n\n <iframe src=\"https://jsgist.org/embed.html?src={gistId}\"></iframe>\n \n
\nfoo
\n\n\n\n*/\n\nfunction indent4(s) {\n return s.split('\\n').map(s => ` ${s}`).join('\\n');\n}\n\nfunction makeSnippet(data, asModule) {\n const files = data.files;\n const mainHTML = getOrFind(files, 'index.html', 'html');\n const mainJS = getOrFind(files, 'index.js', 'js', 'js', 'javascript');\n const mainCSS = getOrFind(files, 'index.css', 'css');\n return asModule\n ? `\n\n\n\n\n\n\n${indent4(mainCSS.content)}\n\n\n\n${indent4(mainHTML.content)}\n \n\n\n`\n : `\n\n\n\n\n${indent4(mainJS.content)}\n\n\n\n${indent4(mainCSS.content)}\n\n\n\n${indent4(mainHTML.content)}\n\n\n`;\n\n}\n\nfunction openInCodepen(data) {\n const files = data.files;\n const mainHTML = getOrFind(files, 'index.html', 'html');\n const mainJS = getOrFind(files, 'index.js', 'js', 'js', 'javascript');\n const mainCSS = getOrFind(files, 'index.css', 'css');\n\n const pen = {\n title : data.name,\n description : data.name,\n editors : '101',\n html : mainHTML.content,\n css : mainCSS.content,\n js : mainJS.content,\n };\n\n const elem = document.createElement('div');\n elem.innerHTML = `\n \"\n `;\n elem.querySelector('input[name=data]').value = JSON.stringify(pen);\n document.body.appendChild(elem);\n elem.querySelector('form').submit();\n document.body.removeChild(elem);\n}\n\nfunction openInJSFiddle(data) {\n const files = data.files;\n const mainHTML = getOrFind(files, 'index.html', 'html');\n const mainJS = getOrFind(files, 'index.js', 'js', 'js', 'javascript');\n const mainCSS = getOrFind(files, 'index.css', 'css');\n\n const elem = document.createElement('div');\n elem.innerHTML = `\n \n `;\n elem.querySelector('input[name=html]').value = mainHTML.content;\n elem.querySelector('input[name=css]').value = mainCSS.content;\n elem.querySelector('input[name=js]').value = mainJS.content;\n elem.querySelector('input[name=title]').value = data.name;\n document.body.appendChild(elem);\n elem.querySelector('form').submit();\n document.body.removeChild(elem);\n}\n\nfunction makeHTML(data, asModule) {\n const files = data.files;\n const mainHTML = getOrFind(files, 'index.html', 'html');\n const mainJS = getOrFind(files, 'index.js', 'js', 'js', 'javascript');\n const mainCSS = getOrFind(files, 'index.css', 'css');\n const isModule = asModule !== undefined ? asModule : /\\bimport\\b/.test(mainJS.content);\n const module = isModule\n ? ' type=\"module\"'\n : '';\n return `\n\n \n \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