Wow! This is so awesome!

[seanaguinaga]

I love this idea!

I wish I understood more about how this code works - the way you handle dependencies - and everything else - is awesome!

[seanaguinaga]

https://poet.krasimir.now.sh/s/YEoBgYGvEIB/typescript

I'm having a hard time getting imports to work on my story - is there something I am missing? :)

[krasimir]

Hey @seanaguinaga,

the import statement in Poet works only for local files. I mean files that are created inside the story. For external dependencies you don't have to import anything. The way of how it works is that you specify a UDM version of the library by using a full URL. For example:

styled-components

becomes

https://unpkg.com/styled-components@5.2.1/dist/styled-components.cjs.js

Then if the library has a UDM version you'll get a global variable called StyledComponents (probably). That's how it works with React.

Sadly in your case both libraries styled-components and @ionic/react do not have UDM versions.

P.S. Poet was created as a simple playground and it doesn't fully emulates a javascript land like https://codesandbox.io. That's because it has no compilation in the background service (too expensive for a side project). It transpiles and bundles on the fly in the browser.

[seanaguinaga]

Ah okay - that makes sense

I am trying to make something technically similar to demo.it but leaning more heavily on react.

You used iframes for this correct?

I am trying this: https://www.npmjs.com/package/react-code-sandbox

Ex:

import CodeSandbox from 'react-code-sandbox'

import React from 'react'
import { Text } from 'candour'

const code = `
import { render } from 'react-dom'
import React from 'react'
import { Text } from 'candour'

render(
  <div>
    This is a source string
  </div>
)
`

// add this to your app
<CodeSandbox imports={{ React, Text }}>
  {code}
</CodeSandbox>

Regarding imports, do you think a service like UNPKG could be combined with dynamic imports/webpack?

import("./math").then(math => {
  console.log(math.add(16, 26));
});

[krasimir]

I'm not sure to be honest. Importing a single file cold be ok but for sure that file has dependencies and then it becomes tricky. I'm not sure how codesandbox work but I suspect that they have a service that compiles everything and sends the result to the browser so the developer can see it.

[seanaguinaga]

It's a confusing name - this CodeSanbox is just a nom package / React/JSX Bundler that can be added to the site.

If I wanted to "steal" some of your great ideas that are in this repo, what files should I start off looking at first - so I can follow the trail of logic?

[krasimir]

I think this is what you need to transpile code in the browser: https://github.com/krasimir/demoit/blob/master/src/js/utils/transpile.js

To make Babel available globally you have to add to your page the babel files from here https://github.com/krasimir/demoit/tree/master/src/js-vendor