migration

apps/remix-ide/src/assets/js/init.js

@@ -41,23 +41,12 @@ for (const k in assets[versionToLoad]) {
 }
 
 window.onload = () => {
-  /* BrowserFS.install(window)
-                    BrowserFS.configure({
-                        fs: "LocalStorage"
-                    }, function(e) {
-                        if (e) console.log(e)
-                        let app = document.createElement('script')
-                        app.setAttribute('src', versions[versionToLoad])
-                        document.body.appendChild(app)
-                        window.remixFileSystem = require('fs')
-                    }) */
-  console.log('loading indexdb')
   // eslint-disable-next-line no-undef
   class RemixFileSystem extends LightningFS {
     constructor (...t) {
       super(...t)
       this.addSlash = (file) => {
-        if (!file.startsWith('/'))file = '/' + file
+        if (!file.startsWith('/')) file = '/' + file
         return file
       }
       this.base = this.promises
@@ -97,34 +86,22 @@ window.onload = () => {
     }
   }
 
-  function loadApp(){
+  function loadApp () {
     const app = document.createElement('script')
     app.setAttribute('src', versions[versionToLoad])
     document.body.appendChild(app)
   }
 
-  function migrateFiles(){
-    BrowserFS.install(window)
-    BrowserFS.configure({
-        fs: "LocalStorage"
-    }, function(e) {
-        if (e) console.log(e)
-        let browserFS = require('fs')
-        console.log(browserFS)
-    })
-  }
-
   window.remixFileSystemCallback = new RemixFileSystem()
-  window.remixFileSystemCallback.init('RemixFileSystem').then(() => {
+  window.remixFileSystemCallback.init('RemixFileSystem', { wipe: false }).then(() => {
     window.remixFileSystem = window.remixFileSystemCallback.promises
     // check if .workspaces is present in indexeddb
-    window.remixFileSystem.stat('.workspaces2').then((dir) => {
+    window.remixFileSystem.stat('.workspaces').then((dir) => {
-      if(dir.isDirectory()) loadApp()
+      if (dir.isDirectory()) loadApp()
-    }).catch(()=>{
+    }).catch(() => {
       // no indexeddb workspaces
-      console.log("loading localstorage FS")
+      // eslint-disable-next-line no-undef
-      migrateFiles();
+      migrateFilesFromLocalStorage(loadApp)
-    });
+    })
-
   })
 }

apps/remix-ide/src/assets/js/migrate.js

@@ -0,0 +1,100 @@
+// eslint-disable-next-line no-unused-vars
+async function migrateFilesFromLocalStorage (cb) {
+  // eslint-disable-next-line no-undef
+  BrowserFS.install(window)
+  // eslint-disable-next-line no-undef
+  BrowserFS.configure({
+    fs: 'LocalStorage'
+  }, async function (e) {
+    if (e) console.log(e)
+
+    const browserFS = require('fs')
+
+    /**
+      * copy the folder recursively (internal use)
+      * @param {string} path is the folder to be copied over
+      * @param {Function} visitFile is a function called for each visited files
+      * @param {Function} visitFolder is a function called for each visited folders
+      */
+    async function _copyFolderToJsonInternal (path, visitFile, visitFolder) {
+      const fs = browserFS
+      visitFile = visitFile || (() => { })
+      visitFolder = visitFolder || (() => { })
+      return new Promise((resolve, reject) => {
+        const json = {}
+        if (fs.existsSync(path)) {
+          try {
+            const items = fs.readdirSync(path)
+            visitFolder({ path })
+            if (items.length !== 0) {
+              items.forEach(async (item, index) => {
+                const file = {}
+                const curPath = `${path}${path.endsWith('/') ? '' : '/'}${item}`
+                if (fs.statSync(curPath).isDirectory()) {
+                  file.children = await _copyFolderToJsonInternal(curPath, visitFile, visitFolder)
+                } else {
+                  file.content = fs.readFileSync(curPath, 'utf8')
+                  visitFile({ path: curPath, content: file.content })
+                }
+                json[curPath] = file
+              })
+            }
+          } catch (e) {
+            console.log(e)
+            return reject(e)
+          }
+        }
+        return resolve(json)
+      })
+    }
+
+    /**
+       * copy the folder recursively
+       * @param {string} path is the folder to be copied over
+       * @param {Function} visitFile is a function called for each visited files
+       * @param {Function} visitFolder is a function called for each visited folders
+       */
+    async function copyFolderToJson (path, visitFile, visitFolder) {
+      visitFile = visitFile || (() => { })
+      visitFolder = visitFolder || (() => { })
+      return _copyFolderToJsonInternal(path, visitFile, visitFolder)
+    }
+
+    const populateWorkspace = async (json, browserProvider) => {
+      for (const item in json) {
+        const isFolder = json[item].content === undefined
+        if (isFolder) {
+          await createDir(item)
+          await populateWorkspace(json[item].children, browserProvider)
+        } else {
+          try {
+            await window.remixFileSystem.writeFile(item, json[item].content, 'utf8')
+          } catch (error) {
+            console.log(error)
+          }
+        }
+      }
+    }
+
+    const createDir = async (path) => {
+      const paths = path.split('/')
+      if (paths.length && paths[0] === '') paths.shift()
+      let currentCheck = ''
+      for (const value of paths) {
+        currentCheck = currentCheck + '/' + value
+        if (!await window.remixFileSystem.exists(currentCheck)) {
+          try {
+            await window.remixFileSystem.mkdir(currentCheck)
+          } catch (error) {
+            console.log(error)
+          }
+        }
+      }
+    }
+
+    const files = await copyFolderToJson('/')
+    await populateWorkspace(files, window.remixFileSystem)
+    // eslint-disable-next-line no-undef
+    if (cb) cb()
+  })
+}

apps/remix-ide/src/index.html

@@ -28,6 +28,7 @@
 		<link rel="icon" type="x-icon" href="assets/img/icon.png">
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.1.0/introjs.min.css"> 
 		<script src="assets/js/browserfs.min.js"></script>
+		<script src="assets/js/migrate.js"></script>
 		<script src="assets/js/lightning-fs.min.js"></script>
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 		<!-- Matomo -->

apps/remix-ide/src/production.index.html

@@ -28,6 +28,7 @@
 		<link rel="icon" type="x-icon" href="assets/img/icon.png">
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.1.0/introjs.min.css"> 
 		<script src="assets/js/browserfs.min.js"></script>
+		<script src="assets/js/migrate.js"></script>
 		<script src="assets/js/lightning-fs.min.js"></script>
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 		<!-- Matomo -->