Refactorization

[Soremwar]

The following issue tracks the refactoring of the x/types library.

This is made with the purpose of making this library more suitable for use in production now that 1.0 is so close. It introduces version tracking individual library tests and JSDoc documentation to be used along with deno doc.

• [ ] Document current types to make them usable through deno doc. (Waiting on https://github.com/denoland/deno/issues/4711)
• [ ] Add tests for required libraries.
• [x] Include guidelines for contributing to this library.

[piyushchauhan2011]

Hi @Soremwar, this might be a bad place to ask question, but I tried

import React from "https://cdn.pika.dev/@pika/[email protected]";
import ReactDOMServer from "https://cdn.pika.dev/@pika/[email protected]/server.ts";

But apparently, ReactDOMServer is just imported as ReactDOM. After reading the blog post about https://dev.to/pika/introducing-pika-cdn-deno-p8b, deno being able to import types automatically (which works), I thought I will be able to import ReactDOMServer.

I wanted to know, is there any way to import require('react-dom/server') like modules from pika cdn?

[Soremwar]

@piyushchauhan2011 Require is a functionality of CommonJS, Deno only accepts JavaScript syntax.

I just updated the documentation on ReactDomServer to reflect the real path of the import, which goes as follows:

import ReactDomServer from "https://dev.jspm.io/[email protected]/server.js";

[piyushchauhan2011]

@piyushchauhan2011 Require is a functionality of CommonJS, Deno only accepts JavaScript syntax.

I just updated the documentation on ReactDomServer to reflect the real path of the import, which goes as follows:

import ReactDomServer from "https://dev.jspm.io/[email protected]/server.js";

Thanks, this works 💯

[piyushchauhan2011]

I was trying to bundle files using Deno and output them as javascript for the browser, it looks like the implementation of SystemJS is not working properly. I used below to bundle!

mod.ts

const [diagnostics, emit] = await bundle("./appBrowser.tsx");
const encoder = new TextEncoder();
const data = encoder.encode(emit);
writeFileSync("./assets/bundle.js", data);

appIndex.tsx

// @ts-ignore
import React from 'https://cdn.pika.dev/react/^16.13.1';

export class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, World</h1>
      </div>
    );
  }
}

export function renderApp() {
  return <App />;
}

appBrowser.tsx

// import React from 'https://dev.jspm.io/react';
// import ReactDOM from 'https://dev.jspm.io/react-dom';

// @ts-ignore
import React from 'https://cdn.pika.dev/react/^16.13.1';
// @ts-ignore
import ReactDOM from 'https://cdn.pika.dev/react-dom/^16.13.1';

import { App } from './appIndex.tsx';

ReactDOM.render(<App />, document.getElementById('root'));

and output is like this which gives weird error in of default undefined

// Copyright 2018-2020 the Deno authors. All rights reserved. MIT license.

// This is a specialised implementation of a System module loader.

// @ts-nocheck
/* eslint-disable */
let System, __instantiateAsync, __instantiate;

(() => {
  const r = new Map();

  System = {
    register(id, d, f) {
      r.set(id, { d, f, exp: {} });
    },
  };

  async function dI(mid, src) {
    let id = mid.replace(/\.\w+$/i, "");
    if (id.includes("./")) {
      const [o, ...ia] = id.split("/").reverse(),
        [, ...sa] = src.split("/").reverse(),
        oa = [o];
      let s = 0,
        i;
      while ((i = ia.shift())) {
        if (i === "..") s++;
        else if (i === ".") break;
        else oa.push(i);
      }
      if (s < sa.length) oa.push(...sa.slice(s));
      id = oa.reverse().join("/");
    }
    return r.has(id) ? gExpA(id) : import(mid);
  }

  function gC(id, main) {
    return {
      id,
      import: (m) => dI(m, id),
      meta: { url: id, main },
    };
  }

  function gE(exp) {
    return (id, v) => {
      v = typeof id === "string" ? { [id]: v } : id;
      for (const [id, value] of Object.entries(v)) {
        Object.defineProperty(exp, id, {
          value,
          writable: true,
          enumerable: true,
        });
      }
    };
  }

  function rF(main) {
    for (const [id, m] of r.entries()) {
      const { f, exp } = m;
      const { execute: e, setters: s } = f(gE(exp), gC(id, id === main));
      delete m.f;
      m.e = e;
      m.s = s;
    }
  }

  async function gExpA(id) {
    if (!r.has(id)) return;
    const m = r.get(id);
    if (m.s) {
      const { d, e, s } = m;
      delete m.s;
      delete m.e;
      for (let i = 0; i < s.length; i++) s[i](await gExpA(d[i]));
      const r = e();
      if (r) await r;
    }
    return m.exp;
  }

  function gExp(id) {
    if (!r.has(id)) return;
    const m = r.get(id);
    if (m.s) {
      const { d, e, s } = m;
      delete m.s;
      delete m.e;
      for (let i = 0; i < s.length; i++) s[i](gExp(d[i]));
      e();
    }
    return m.exp;
  }

  __instantiateAsync = async (m) => {
    System = __instantiateAsync = __instantiate = undefined;
    rF(m);
    return gExpA(m);
  };

  __instantiate = (m) => {
    System = __instantiateAsync = __instantiate = undefined;
    rF(m);
    return gExp(m);
  };
})();

System.register("appIndex", ["https://cdn.pika.dev/react/^16.13.1"], function (exports_1, context_1) {
    "use strict";
    var _16_13_1_1, App;
    var __moduleName = context_1 && context_1.id;
    function renderApp() {
        return _16_13_1_1.default.createElement(App, null);
    }
    exports_1("renderApp", renderApp);
    return {
        setters: [
            function (_16_13_1_1_1) {
                _16_13_1_1 = _16_13_1_1_1;
            }
        ],
        execute: function () {
            App = class App extends _16_13_1_1.default.Component {
                render() {
                    return (_16_13_1_1.default.createElement("div", null,
                        _16_13_1_1.default.createElement("h1", null, "Hello, World")));
                }
            };
            exports_1("App", App);
        }
    };
});
// import React from 'https://dev.jspm.io/react';
// import ReactDOM from 'https://dev.jspm.io/react-dom';
System.register("appBrowser", ["https://cdn.pika.dev/react/^16.13.1", "https://cdn.pika.dev/react-dom/^16.13.1", "appIndex"], function (exports_2, context_2) {
    "use strict";
    var _16_13_1_2, _16_13_1_3, appIndex_tsx_1;
    var __moduleName = context_2 && context_2.id;
    return {
        setters: [
            function (_16_13_1_2_1) {
                _16_13_1_2 = _16_13_1_2_1;
            },
            function (_16_13_1_3_1) {
                _16_13_1_3 = _16_13_1_3_1;
            },
            function (appIndex_tsx_1_1) {
                appIndex_tsx_1 = appIndex_tsx_1_1;
            }
        ],
        execute: function () {
            _16_13_1_3.default.render(_16_13_1_2.default.createElement(appIndex_tsx_1.App, null), document.getElementById('root'));
        }
    };
});

__instantiate("appBrowser");

If we switch from pika.dev to jspm.io it bundle all, but the error remains the same 😭

[Soremwar]

@piyushchauhan2011 Deno.compile and Deno.bundle don't have a purpose of producing builds for the browser. Their purpose is to produce builds still usable with Deno for compatibility, but they are not a replacement for things like Webpack or Parcel(not at the moment).