pull/2113/head
bunsenstraat 3 years ago
parent 41f441748a
commit daf5508e2c
  1. 22
      apps/remix-ide/src/app/components/preload.css
  2. 102
      apps/remix-ide/src/app/components/preload.tsx
  3. 7
      apps/remix-ide/src/app/files/filesystems/localStorage.ts

@ -0,0 +1,22 @@
.preload-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.preload-info-container {
display: flex;
flex-direction: column;
text-align: center;
max-width: 400px;
}
.preload-info-container .btn {
cursor: pointer;
}
.preload-logo {
min-width: 200px;
}

@ -2,10 +2,11 @@ import { RemixApp } from '@remix-ui/app'
import React, { useEffect, useRef, useState } from 'react'
import { render } from 'react-dom'
import * as packageJson from '../../../../../package.json'
import { fileSystems } from '../files/fileSystem'
import { fileSystem, fileSystems } from '../files/fileSystem'
import { indexedDBFileSystem } from '../files/filesystems/indexedDB'
import { localStorageFS } from '../files/filesystems/localStorage'
import { fileSystemUtility } from '../files/filesystems/migrateFileSystem'
import './preload.css'
export const Preload = () => {
@ -13,12 +14,8 @@ export const Preload = () => {
const [error, setError] = useState<boolean>(false)
const [showDownloader, setShowDownloader] = useState<boolean>(false)
const remixFileSystems = useRef<fileSystems>(new fileSystems())
const logo = <svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M91.84,35a.09.09,0,0,1-.1-.07,41,41,0,0,0-79.48,0,.09.09,0,0,1-.1.07C9.45,35,1,35.35,1,42.53c0,8.56,1,16,6,20.32,2.16,1.85,5.81,2.3,9.27,2.22a44.4,44.4,0,0,0,6.45-.68.09.09,0,0,0,.06-.15A34.81,34.81,0,0,1,17,45c0-.1,0-.21,0-.31a35,35,0,0,1,70,0c0,.1,0,.21,0,.31a34.81,34.81,0,0,1-5.78,19.24.09.09,0,0,0,.06.15,44.4,44.4,0,0,0,6.45.68c3.46.08,7.11-.37,9.27-2.22,5-4.27,6-11.76,6-20.32C103,35.35,94.55,35,91.84,35Z" />
<path d="M52,74,25.4,65.13a.1.1,0,0,0-.1.17L51.93,91.93a.1.1,0,0,0,.14,0L78.7,65.3a.1.1,0,0,0-.1-.17L52,74A.06.06,0,0,1,52,74Z" />
<path d="M75.68,46.9,82,45a.09.09,0,0,0,.08-.09,29.91,29.91,0,0,0-.87-6.94.11.11,0,0,0-.09-.08l-6.43-.58a.1.1,0,0,1-.06-.18l4.78-4.18a.13.13,0,0,0,0-.12,30.19,30.19,0,0,0-3.65-6.07.09.09,0,0,0-.11,0l-5.91,2a.1.1,0,0,1-.12-.14L72.19,23a.11.11,0,0,0,0-.12,29.86,29.86,0,0,0-5.84-4.13.09.09,0,0,0-.11,0l-4.47,4.13a.1.1,0,0,1-.17-.07l.09-6a.1.1,0,0,0-.07-.1,30.54,30.54,0,0,0-7-1.47.1.1,0,0,0-.1.07l-2.38,5.54a.1.1,0,0,1-.18,0l-2.37-5.54a.11.11,0,0,0-.11-.06,30,30,0,0,0-7,1.48.12.12,0,0,0-.07.1l.08,6.05a.09.09,0,0,1-.16.07L37.8,18.76a.11.11,0,0,0-.12,0,29.75,29.75,0,0,0-5.83,4.13.11.11,0,0,0,0,.12l2.59,5.6a.11.11,0,0,1-.13.14l-5.9-2a.11.11,0,0,0-.12,0,30.23,30.23,0,0,0-3.62,6.08.11.11,0,0,0,0,.12l4.79,4.19a.1.1,0,0,1-.06.17L23,37.91a.1.1,0,0,0-.09.07A29.9,29.9,0,0,0,22,44.92a.1.1,0,0,0,.07.1L28.4,47a.1.1,0,0,1,0,.18l-5.84,3.26a.16.16,0,0,0,0,.11,30.17,30.17,0,0,0,2.1,6.76c.32.71.67,1.4,1,2.08a.1.1,0,0,0,.06,0L52,68.16H52l26.34-8.78a.1.1,0,0,0,.06-.05,30.48,30.48,0,0,0,3.11-8.88.1.1,0,0,0-.05-.11l-5.83-3.26A.1.1,0,0,1,75.68,46.9Z" />
</svg>
const remixIndexedDB = useRef<fileSystem>(new indexedDBFileSystem())
const localStorageFileSystem = useRef<fileSystem>(new localStorageFS())
function loadAppComponent() {
import('../../app').then((AppComponent) => {
@ -37,79 +34,80 @@ export const Preload = () => {
})
}
const downloadBackup = async () => {
const fsUtility = new fileSystemUtility()
await fsUtility.downloadBackup(remixFileSystems.current.fileSystems['localstorage'])
await migrateAndLoad()
}
const skipBackup = async () => {
await migrateAndLoad()
}
const downloadBackup = async () =>{
const migrator = new fileSystemUtility()
migrator.downloadBackup(remixFileSystems.current.fileSystems['localstorage'])
loadAppComponent()
const migrateAndLoad = async () => {
const fsUtility = new fileSystemUtility()
await fsUtility.migrate(localStorageFileSystem.current, remixIndexedDB.current)
await setFileSystems()
}
const skipBackup = async() => {
loadAppComponent()
const setFileSystems = async () => {
const fsLoaded = await remixFileSystems.current.setFileSystem([remixIndexedDB.current, localStorageFileSystem.current])
if (fsLoaded) {
console.log(fsLoaded.name + ' activated')
loadAppComponent()
} else {
setSupported(false)
}
}
useEffect(() => {
async function loadStorage() {
const remixIndexedDB = new indexedDBFileSystem()
const localStorageFileSystem = new localStorageFS()
await remixFileSystems.current.addFileSystem(remixIndexedDB)
await remixFileSystems.current.addFileSystem(localStorageFileSystem)
setShowDownloader(true)
const migrator = new fileSystemUtility()
await migrator.migrate(localStorageFileSystem, remixIndexedDB)
const fsLoaded = await remixFileSystems.current.setFileSystem([remixIndexedDB, localStorageFileSystem])
if (fsLoaded) {
console.log(fsLoaded.name + ' activated')
console.log(localStorageFileSystem)
// migrator.downloadBackup(localStorageFileSystem)
//loadAppComponent()
} else {
console.log('No filesystem could be loaded')
setSupported(false)
// displayBrowserNotSupported()
}
await remixFileSystems.current.addFileSystem(remixIndexedDB.current)
await remixFileSystems.current.addFileSystem(localStorageFileSystem.current)
await remixIndexedDB.current.checkWorkspaces()
remixIndexedDB.current.hasWorkSpaces ? await setFileSystems() : setShowDownloader(true)
}
loadStorage()
}, [])
return <>
<div style={{ display: 'block' }} className='centered'>
{logo}
<div className="info-secondary splash">
REMIX IDE
<br />
<span className='version'> v{packageJson.version}</span>
<div className='preload-container'>
<div className='preload-logo pb-4'>
{logo}
<div className="info-secondary splash">
REMIX IDE
<br />
<span className='version'> v{packageJson.version}</span>
</div>
</div>
{!supported ?
<div style={{ marginTop: '50%', textAlign: 'center' }}>
<div className='preload-info-container alert alert-warning'>
Your browser does not support any of the filesytems required by Remix.
Either change the settings in your browser or use a supported browser.
</div> : null}
{error ?
<div style={{ marginTop: '50%', textAlign: 'center' }}>
<div className='preload-info-container alert alert-danger'>
An unknown error has occured loading the application.
</div> : null}
{showDownloader ?
<div style={{ marginTop: '20%', textAlign: 'center' }}>
<div className='preload-info-container alert alert-info'>
This app will be updated now. Please download a backup of your files now to make sure you don't lose your work.
<br></br>
You don't need to do anything else, your files will be available when the app loads.
<div onClick={async() => {await downloadBackup()}} className='btn btn-primary mt-1'>download backup</div>
<div onClick={async() => {await skipBackup()}}className='btn btn-primary mt-1'>skip backup</div>
<div onClick={async () => { await downloadBackup() }} className='btn btn-primary mt-1'>download backup</div>
<div onClick={async () => { await skipBackup() }} className='btn btn-primary mt-1'>skip backup</div>
</div> : null}
{(supported && !error && !showDownloader) ?
<div style={{ marginTop: '50%', textAlign: 'center' }}>
<div>
<i className="fas fa-spinner fa-spin fa-2x"></i>
</div> : null}
</div>
</>
}
}
const logo = <svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M91.84,35a.09.09,0,0,1-.1-.07,41,41,0,0,0-79.48,0,.09.09,0,0,1-.1.07C9.45,35,1,35.35,1,42.53c0,8.56,1,16,6,20.32,2.16,1.85,5.81,2.3,9.27,2.22a44.4,44.4,0,0,0,6.45-.68.09.09,0,0,0,.06-.15A34.81,34.81,0,0,1,17,45c0-.1,0-.21,0-.31a35,35,0,0,1,70,0c0,.1,0,.21,0,.31a34.81,34.81,0,0,1-5.78,19.24.09.09,0,0,0,.06.15,44.4,44.4,0,0,0,6.45.68c3.46.08,7.11-.37,9.27-2.22,5-4.27,6-11.76,6-20.32C103,35.35,94.55,35,91.84,35Z" />
<path d="M52,74,25.4,65.13a.1.1,0,0,0-.1.17L51.93,91.93a.1.1,0,0,0,.14,0L78.7,65.3a.1.1,0,0,0-.1-.17L52,74A.06.06,0,0,1,52,74Z" />
<path d="M75.68,46.9,82,45a.09.09,0,0,0,.08-.09,29.91,29.91,0,0,0-.87-6.94.11.11,0,0,0-.09-.08l-6.43-.58a.1.1,0,0,1-.06-.18l4.78-4.18a.13.13,0,0,0,0-.12,30.19,30.19,0,0,0-3.65-6.07.09.09,0,0,0-.11,0l-5.91,2a.1.1,0,0,1-.12-.14L72.19,23a.11.11,0,0,0,0-.12,29.86,29.86,0,0,0-5.84-4.13.09.09,0,0,0-.11,0l-4.47,4.13a.1.1,0,0,1-.17-.07l.09-6a.1.1,0,0,0-.07-.1,30.54,30.54,0,0,0-7-1.47.1.1,0,0,0-.1.07l-2.38,5.54a.1.1,0,0,1-.18,0l-2.37-5.54a.11.11,0,0,0-.11-.06,30,30,0,0,0-7,1.48.12.12,0,0,0-.07.1l.08,6.05a.09.09,0,0,1-.16.07L37.8,18.76a.11.11,0,0,0-.12,0,29.75,29.75,0,0,0-5.83,4.13.11.11,0,0,0,0,.12l2.59,5.6a.11.11,0,0,1-.13.14l-5.9-2a.11.11,0,0,0-.12,0,30.23,30.23,0,0,0-3.62,6.08.11.11,0,0,0,0,.12l4.79,4.19a.1.1,0,0,1-.06.17L23,37.91a.1.1,0,0,0-.09.07A29.9,29.9,0,0,0,22,44.92a.1.1,0,0,0,.07.1L28.4,47a.1.1,0,0,1,0,.18l-5.84,3.26a.16.16,0,0,0,0,.11,30.17,30.17,0,0,0,2.1,6.76c.32.71.67,1.4,1,2.08a.1.1,0,0,0,.06,0L52,68.16H52l26.34-8.78a.1.1,0,0,0,.06-.05,30.48,30.48,0,0,0,3.11-8.88.1.1,0,0,0-.05-.11l-5.83-3.26A.1.1,0,0,1,75.68,46.9Z" />
</svg>

@ -10,10 +10,9 @@ export class localStorageFS extends fileSystem {
const me = this
return new Promise((resolve, reject) => {
try {
// eslint-disable-next-line no-undef
BrowserFS.install(window)
// eslint-disable-next-line no-undef
BrowserFS.configure({
const w = window as any
w.BrowserFS.install(window)
w.BrowserFS.configure({
fs: 'LocalStorage'
}, async function (e) {
if (e) {

Loading…
Cancel
Save