Sandbox Search

[CompuIves]

Yes, it's here! I'm waiting for pricing functionality before releasing this, I want to give the users the option to make their sandboxes private.

[faceyspacey]

when are u gonna start using RFR instead of React Router? ;) ...u shouldn't have to think about routes, especially in your connected components when u have the great power of Redux available to you.

[faceyspacey]

What do you need these * and ? for here:

https://github.com/CompuIves/codesandbox-client/blob/7cff97fb6512591a2a558a84ccbeb55b54eb0d90/src/app/pages/index.js#L101

https://github.com/CompuIves/codesandbox-client/blob/7cff97fb6512591a2a558a84ccbeb55b54eb0d90/src/app/pages/index.js#L102

ive been using RFR for almost a year and never need more than :segment. I forget what capability the regular expression style route paths give you that you can't accomplish with a plain :dynamicSegment?

It's been something in the back of my head I've wanted to visit for RFR to insure all bases are covered.

[faceyspacey]

I guess the question mark means u require the URL in the addressbar to have a question mark directly after the path segment. But do u really need that? I guess the question is, do you really have the business need of not matching if the user visits the URL without a query string?

...As far the asterisk, I still cant figure out what that will do with a dynamic path segment. I get that in a static segment, it lets you match multiple static segments. But in a dynamic one, ur already matching all paths at that segment. Does the asterisk apply to the next path segment (or all next path segments)? if that's the case I'd expect it to be /s/:id/*.

..by the way, for both these patterns, there's an idiomatic way to accomplish it in RFR.

[faceyspacey]

also, by the way this:

const SignIn = Loadable({
  loader: () => import('./SignIn'),
  LoadingComponent: Loading,
});
const NotFound = Loadable({
  loader: () => import('./NotFound'),
  LoadingComponent: Loading,
});
const Sandbox = Loadable({
  loader: () => import('./Sandbox'),
  LoadingComponent: Loading,
});
const Profile = Loadable({
  loader: () => import('./Profile'),
  LoadingComponent: Loading,
});
const CLI = Loadable({
  loader: () => import('./CLI'),
  LoadingComponent: Loading,
});
const GitHub = Loadable({
  loader: () => import('./GitHub'),
  LoadingComponent: Loading,
});

u can accomplish like this in react-universal-component using webpack-flush-chunks which u might have seen in today's articles or my previous articles:

import universal from 'react-universal-component'
const UniversalComponent = universal(props => import(`./${props.page}`))

Loadable doesn't support dynamic requires. In fact webpack only supports them client-side. I'm working on finishing up my PR with the webpack team to support true universal dynamic requires:

webpack/webpack#5235

Once I complete the tasks they gave me and they merge it, the code-splitting + SSR dream is complete. No more hashes of a million components--just one HoC that responds to props like above. Code-splitting everywhere frictionlessly, and without sacrificing SSR/SEO (and complete SEO will be good for u business--u have lots of code, that's text search engines should be picking up)

Today, u can do above in client-only SPAs, which I assume codesandbox is when it comes to this. If u want full SSR + splitting we can do it today if u want too. I use a fork of Webpack that uses my above PR so i can get full universal splitting.

[faceyspacey]

[CompuIves]

I use * for paths that contain multiple slashes (like /github/tree/master etc), and ? for optional parameters.

UniversalComponent and webpack-flush-chunks look very interesting! I'll delve into the details of them later today.

The main reason I haven't converted to Redux-Simple Router yet (or to any other alternative for that matter) is that I have a limited amount of time a day for CodeSandbox, and I'd like to focus that time on fixing bugs and creating new functionality. Of course, I'm open to converting as soon as some major functions (search, pricing, templates) are implemented.