# Discussion: Transient Objects

import { GenericTransient} from '@builder.io/qwik';

interface GenericTransient {
    [key: string]: any;
}

export interface MyVolatileState {
    getCompiler(): Promise<Compiler>
}

const MyComponent = component$(() => {
  const store = createStore({
    compilerVersion: '0.0.1',
    input: 'export const answer = 42;',
    output: null,
  },{
    getCompiler: $((obs) => {
      const {compilerVersion} = obs(store);
      return await fetch(`...${compilerVersion}`);
    })
  });
  
  const tStore = createTransient({
    getCompiler: $((obs) => {
      const {compilerVersion} = obs(store);
      return await fetch(`...${compilerVersion}`);
    }),
    getDefaultCompiler: $(() => {
      const compilerVersion = 'latest';
      return await fetch(`...${compilerVersion}`);
    }),
  });
    
  

  const transientObj = createTransient();
  
  
  return onRender$(() => (
    <>
      <button on$:click={() => {
        const compiler = await getCompiler();
        const store.output = compiler(store.input);
      }}>compile</button>
    </>
  ))
});

const MyComponent = component$(() => {
  const store = createStore({
    compilerVersion: '0.0.1',
  });
  
  const getCompiler = createTransient$((obs) => {
    const {compilerVersion} = obs(store);
    return Promise.resolve(compilerVersion);
    // What about chaining transients? How does that work with observables
  })
  
  // This watches 'version' to load the compiler
  onWatch$((obs) => {
    const {compilerVersion} = obs(store);
    // This is wrong, cuz we dont want to serialize the compiler
    const compiler = await getCompiler();
      // WHERE DO WE STORE THE OPTIMIZER?
  });
    
  // This watches 'code' to compile it
  onWatch$((obs) => {
    const {code, version} = obs(store);
    const compiler = await getCompiler();    
  });
  
  return onRender$(() => (
    <>
      <button on$:click={
         const tempPromise = useTransient(store, GetTemp);
      }>a</button>
      <button on$:click={
         const tempPromise = useTransient(store, GetTemp);                   
       }>a</button>
    </>
  ))
});

## Manu version

interface Transient {
    optimizer: Optimizer | undefined,
}

function GetCompiler(this: {compilerVersion: string}) {
  return Promise.resolve(this.compilerVersion);
} 

function getCompiler(version: string) {
  return useTransient(null, GetCompiler, version);
}

const MyComponent = component$(() => {
  const store = createStore({
    compilerVersion: '0.0.1',
  });
    
  const transientStore = createTransientStore<Transient>(); // existance of transient (not content) Record<string, T | undefined>
    
  // This watches 'version' to load the compiler
  onWatch$((obs) => {
    const {compilerVersion} = obs(store);
    transientStore.optimizer = await useTransient(GetCompiler);
  });
    
  // This watches 'code' to compile it
  onWatch$((obs) => {
    const {code, version} = obs(store);
    const {optimizer} = obs(transientStore);
    if (optimizer) {
      const optimizer = await useTransient(null, GetCompiler, version);
     const results = await optimizer.compile(code)
     store.modules = results.modules;   
}
  });
  
  return onRender$(() => (
    <>
      <button on$:click={
         const tempPromise = useTransient(store, GetTemp);
      }>a</button>
      <button on$:click={
         const tempPromise = useTransient(store, GetTemp);                   
       }>a</button>
    </>
  ))
});

## Manu

<div on:q-watch="!s12.value !s12.code !t1.code">
    
</div>

createStore() => s12
createTransient() => t1



"s12": {
    "key": "adam",
    "value": 'misko'
},
"t1": {
   __type__: 'transient' 
}