feat: resource

src/client/app.jsx

@@ -1,23 +1,24 @@
+import './app.scss';
+
 import {hot} from 'react-hot-loader';
 import React, {useState} from 'react';
 
-import TypeRenderersContext from '~/client/context/typeRenderers';
-import {all as allTypeRenderers} from '~/client/type-renderers.scwp';
-
-import Entity from './entity';
+import TypeRenderersContext from './context/typeRenderers';
+import Resource from './resource';
+import {all as allTypeRenderers} from './type-renderers.scwp';
 
 const typeRenderMap = () => Object.values(allTypeRenderers()).reduce((r, M) => {
   const {default: {type, Component}} = M;
   return {...r, [type]: Component};
 }, {});
 
-const Persea = () => {
+const App = () => {
   const [typeRenderers] = useState(typeRenderMap());
   return (
     <TypeRenderersContext.Provider value={typeRenderers}>
-      <Entity />
+      <Resource uri="/mama-kitty.entity.json" />
     </TypeRenderersContext.Provider>
   );
 };
 
-export default hot(module)(Persea);
+export default hot(module)(App);

src/client/index.jsx

@@ -4,13 +4,8 @@ import {enableMapSet} from 'immer';
 import React from 'react';
 import {render} from 'react-dom';
 
-import Persea from '~/client/components/persea';
+import App from './app';
 
 enableMapSet();
 
-render(
-  (
-    <Persea />
-  ),
-  document.getElementById('root'),
-);
+render(<App />, document.getElementById('root'));

src/client/resource.jsx

@@ -0,0 +1,20 @@
+import './app.scss';
+
+import React from 'react';
+
+import {all} from './resources.scwp';
+
+const resources = Object.values(all()).map((M) => M.default);
+
+const Resource = (props) => {
+  const {
+    uri,
+  } = props;
+  const resource = resources.find((resource) => uri.match(resource.matcher));
+  const {Component} = resource
+    ? resource
+    : {Component: () => <div className="unloadable">No loader for `<code>{uri}</code>`.</div>};
+  return <div className="resource"><Component uri={uri} /></div>;
+};
+
+export default Resource;

src/client/resources.scwp.js

@@ -0,0 +1,3 @@
+module.exports = function types(scwp) {
+  scwp.autoreg('resource');
+};

src/client/resources/entity/component/index.jsx

@@ -6,12 +6,13 @@ import React from 'react';
 import Traits from './traits';
 
 const decorate = compose(
-  contempo(require('./entity.raw.scss')),
+  contempo(require('./index.raw.scss')),
 );
 
 const json = require('~/../fixtures/rock-projectile.entity.json');
 
-const EntityComponent = () => {
+const EntityComponent = (props) => {
+  const {uri} = props;
   const entity = new Entity(json);
   const {traits} = json;
   return (

src/client/resources/entity/component/traits.jsx

@@ -15,7 +15,7 @@ import {
 import {createSelector} from '@reduxjs/toolkit';
 import {deregisterHooks, registerHooks} from 'scwp';
 
-import Value from './types/value.type-renderer';
+import Value from '~/client/components/types/value.type-renderer';
 
 const SCROLL_MAG = 80;
 

src/client/resources/entity/entity.resource.js

@@ -0,0 +1,6 @@
+import EntityComponent from './component';
+
+export default {
+  matcher: /\.entity\.json$/,
+  Component: EntityComponent,
+};