Skip to content

Latest commit

 

History

History
125 lines (89 loc) · 3.37 KB

FUTURE.md

File metadata and controls

125 lines (89 loc) · 3.37 KB

Things I am working on

  • Be super careful to catch all errors
  • Rewrite readme to focus on use-cases and explaining how to implement them.
  • Look into supporting non-create-react-app uploads (Having to parse non-js files will need to be a part of this)
  • With codesandboxer, refactor the shape of it. Take in a single object as argument, to make it easier to pass things around, and so we stop having the problem of ever-expanding functions. Move more properties into a generic config object
  • Add error boundaries around the loaded example component, to allow a better debugging experience when something goes wrong.

New packages to build

  • codesandboxer-loader - use codesandboxer-fs to create the data object to be sent to codesandbox
  • gatsby-plugin-codesandboxer -

Supporting other sandbox types

We currently support react and react-typescript sandboxes If you pass in the template string, you can change your sandbox kind.

Notes made on change alongside LBatch:

fetchRelativePkgJSON(componentFile) compositData(entryFile, componentFile, gitConfig)

fetchRelativePkgJSON(examplePath) .then(({ pkgJSONPath, }) =>

from componentFile, fetch pkgJSON using pkgUp fetch entryFile and its dependents

config = { gitConfig: {} | fs, pkgJSON?: {} | Promise({}), // if no pkgJSON is given, pkgUp to a pkgJSON, entryFilePath?: string // if not provided sub in default file contents, }

fetchFiles(examplePath, config)

ensureEntryFile() => ( if )

const parsedFile = { file: { 'name/path.js': '/* */' }, internalDependencies: [], extternalDependencies: {}, }

const rc = findRC()
const pkgJSON = ensureProjectPkgJSON({ config.pkgJSON, rc.pkgJSON, //pkgUp.pkgJSON })
const parsedEntryFile = ensureEntryFile({ config.entryFile, rc.entryFile, //defaultedEntryFileContents })
const parsedExampleFile = getExampleFile(examplePath)

const files = {
  'example.js': { content: parsedExampleFile.contents },
  'codesandboxerEntry.js': { content: parsedEntryFile.contents },
}

return await assembleAllFilesAndDeps(files, {
    ...parsedEntryFile.externalDeps,
    ...parsedExampleFile.externalDeps
  }, [
    // ...parsedEntryFile.internalDeps,
    ...parsedExampleFile.internalDeps
  ], pkgJSON, config)

// entryFiles cannot have internalDeps import './styles.css' import whatever from './example'

files = { 'path/to/somewhere.js': { content: '/* the file contents */' } }

deps = { package: '^1.1.0' }

createParamsConfig = { name }

createParameters(files, externalDependencies, initialPKGJSON config ????)

const sentPKGJSON = generatePkgJSON(externalDependencies, config) // ensures all packages have react and react-dom
files['package.json'] = sentPKGJSON;
files['index.html'] = <div id="app"></div><script loads app>
files['sandbox.config.json'] = JSON.stringfiy({ template: config.template || 'create-react-app-type' })
return { files, parameters: hashZeFiles(files) }

fetchFiles(examplePath, config)) .then(createParameters) .then(sendFilesToCSB) .then(here is a link)

fs

default -> rc -> overrides (flags)

file-up codesandboxerrc.js

$ codesandboxer examplePath.js -e exampleWrapper.js -p somewhere/package.json

Later stuff: TS/babelrc (file-up, then custom things) AST instead of regex (still needs to check browser-niceness) Relative positioning (and moving position of files) entryFile having internalImports