malerba118

Ideas for StackBlitz

Dynamic Embed Communication

Using postMessage, send data back and forth dynamically between embeded iframe and parent window. This way, the sandbox could send logs and error messages to parent for custom handling. The parent could also send data to be received by the sandbox and dynamically update the interpreter contents. Iframes are hard to customize and query parameters only allow customization on initialization, but postMessage could introduce a variety of dynamic customization options.

Inline Embeds

Embeds are traditionally tied to persisted projects. Inlined project data passed on the embed url would allow the embedding site to own the code and a sandbox would only be persisted in StackBlitz at the point that the embed is forked. This is powerful for documentation sites so they don't have to be updating their code snippets in multiple places and instead they can have a single source of truth for their code snippets. It also would allow auto-updating dependencies. So

malerba118

// Example taken from https://composition-api.vuejs.org/#usage-in-components
import { reactive, computed, watchEffect } from 'vue'

function setup() {
  const state = reactive({
    count: 0,
    double: computed(() => state.count * 2)
  })

  function increment() {

malerba118

const App = createComponent(() => {  
  const divEl$ = observable(null);
  
  // Do something any time our "ref" changes
  observe(divEl$, (divEl) => {
    console.log(divEl)
  });
  
  return (props, state) => (
    <div ref={divEl$.set}>

malerba118

const App = createComponent(() => {  
  // We can achieve ref functionality via closures
  let divEl = null;
  
  return (props, state) => (
    <div ref={(el) => divEl = el}>
      {/*...*/}
    </div>
  );
});

malerba118

const App = createComponent(({ setState }) => {
  // This is a constructor layer that only runs once.
  // Create observables to hold our counter state.
  const countOne$ = observable(0);
  const countTwo$ = observable(0);
  const countTwoDoubled$ = derived(countTwo$, (countTwo) => {
    return countTwo * 2;
  });

  observe(

malerba118

const App = () => {
  const [countOne, setCountOne] = useState(0);
  const [countTwo, setCountTwo] = useState(0);

  const countTwoDoubled = useMemo(() => {
    return countTwo * 2;
  }, [countTwo]);

  return (
    <div>

malerba118

const count$ = observable(5)

observe(count$, (count) => {
  console.log(count)
})

count$.set(6)
count$.set(7)

// Output:

malerba118

const count$ = observable(5)
const doubledCount$ = derived(count$, (count) => count * 2)

observe(doubledCount$, (doubledCount) => {
  console.log(doubledCount)
})

count$.set(6)
count$.set(7)

malerba118

const App = createComponent(() => {
  // This is a constructor function that only runs once 
  // per component instance.
  
  // We would declare our hooks in the constructor.
  const [count, setCount] = useState(0)
  
  // The constructor function returns a render function.
  return (props, state) => (
    <div>

malerba118

const App = () => {
  const [countOne, setCountOne] = useState(0);
  if (countOne === 0) {
    const [countTwo, setCountTwo] = useState(0);
  }

  return (
    <button
      onClick={() => {
        setCountOne((prev) => prev + 1);