udibo / react_app Goto Github PK

This would make it so that you can do more with Provider's on the server. On the server, there should be a ProviderFactory instead of a Provider. Then the ProviderFactory should take an Oak Context so that the provider can be created using anything on it. Currently the Provider is limited to just accessing values in the app's context that will be shared with the browser.

Afterward, finish the React Query Example and uncomment the README.md link to it.

Currently if you copy the example subdirectory, you will need to update the following places for it to work.

• The import_map.json to map "$x/udibo_react_app/" to the module url
• The deno.jsonc task list to use module urls to the build and dev scripts

That's because it currently uses relative paths to the root directory of this repository to use the latest version rather than the latest published version. This was done so that I can manually test Udibo React App during development.

Currently there is only support for the entire route names being parameterized. Investigate partial parameterization, allowing users to make routes like [id].json or [id]-[username].

I recently refactored the build script to make it easier to do incremental builds by separating route generation from updating the route files. Using incremental builds should make build times faster. On my machine, the example build completes in ~126ms. I'm not sure what the build time would be for a larger project yet.

This should be in a separate repository and should be a fork of the basic example. The way to add twind is with a custom renderToReadableStream function. Base it on how I do it in my deno-twind-with-react.

When deploying to production, you should set APP_ENV to production. It's development by default.

Looking for feedback on what all this should include. I'm currently thinking either to just add commands for initializing a new project, or possibly adding more commands for doing other things like initializing routes.

The top level main route wraps all pages so it should be loaded statically instead of dynamically.

Currently the prebuild and postbuild options are on the dev server. They should be on the build function to make it easy to add steps to the build. For example, adding unocss support by having a prebuild step that will run the unocss cli before each build.

The AppState and AppContext is a bit confusing. The AppContext has 2 different meanings. One is for type used to create a React.Context, the other is the React.Context object. The current workaround I'm using is to name the type RawContext and the React.Context is the AppContext.

It should be configurable which logger is being used by the application, but if not configured, use the default logger.

https://deno.land/std/log/mod.ts

This should include a link to the examples that users could fork. Include a bare-bones example with just a main.tsx route.

I currently have etag.factory(), X-Response-Time, and request logging middleware built in. Those should be moved to example/main.ts so that they are optional. Any oak middleware will work with Udibo React App.

This will make easy to clone, run and understand

I haven't documented each function. The documentation should include examples so that people will know how to use them.

I still need to update udibo.com to use Udibo React App. After doing so, add a page for modules with documentation for Udibo React App. The documentation should include references to all examples.

The dev script will generate builds and restart the development server on file changes. Then it will refresh all open tabs for the application. It will verify the server finished restarting before triggering a browser refresh to avoid refreshing when there isn't a server listening for requests.

The way I currently pass secrets to ci.yml isn't working right. If you look at the actions that have run, the "Run tests and collect coverage" step doesn't run, the "Run tests" step runs instead.

Figure out the correct way of passing secrets to ci.yml.

So far I've only manually tested this.

The github action should cache dependencies and build artifacts. The app should be deployed with all recent build artifacts so that pages loaded pre-deployment will continue to work.

Alternatively, for build artifacts, I could update the app to automatically refresh the page if a lazy loaded component's import fails. That could be done by updating how _app.tsx is generated to include a try catch in the lazy callback. This would have the downside of potentially losing application state stored in memory by the browser tab.

I could also do both, so that refreshes would only happen if the build artifacts that the page needs are no longer available. If I do this, I should add a lazy function to app.tsx to minimize code duplication in _app.tsx.

Check the deno manual for examples: https://deno.land/[email protected]/advanced/continuous_integration

I'd like errors in Udibo React App's to be created consistently. The errors will all be created using my HttpError module.

This should be in a separate repository and should be a fork of the basic example. The state for react-query should be encoded into the AppContext. Then a custom Provider should use AppContext to get the initial state for the react-query provider.

So far I've only manually tested this.

Currently the dev script just uses deno task build. Issue(#26) will make it so that the build task is no longer used to do the builds. There will need to be a way to configure the dev script like there is for the build script. Currently the dev script assumes the default build options. The dev script doesn't respect custom build options.

This should include using deno task git-rebase that was added in #7. That PR also describes what to do if rebase doesn't work due to your development branch having commits that are not on the main branch. That should be included in the CONTRIBUTING.md too.

If someone wants to render an error with its stack, the server will render it with the server side error stack then the client would render it with a different stack since it doesn't have access to the server side stack. This causes a hydration error if the error page is rendered on the server.

So far I've only manually tested this.

I believe this can be done by adding if (isServer()) throw Promise.resolve(); to any component you want to render in the browser instead. If you do this, the server side rendered application will render with the nearest suspense boundary. Then when the browser hydrates, the component will be able to render since isServer() will return false in the browser.

I need to test this and add documentation to the README.md file explaining it.

This started happening after updating esbuild in #75.

Building app
▲ [WARNING] Import "ErrorFallback" will always be undefined because there is no matching export in "routes/main.tsx" [import-is-undefined]

    routes/_main.tsx:12:22:
      12 │ if (($0 as RouteFile).ErrorFallback) {
         ╵                       ~~~~~~~~~~~~~

Build completed in 189 ms

In the README.md I mention this project uses React Helmet Async but I don't explain how to update the head. You could figure out how to by looking at the React Helmet Async documentation but I should really give a high level explanation of it with an example.

Currently it's possible to add tools like react query and twind but requires users create there app and server using the custom providers or renderToReadableStream functions to add the additional behavior.

It would be nice to have plugins that can define custom providers and renderToReadableStream functions so that all you have to do is add the plugin to your settings instead of having to figure out how to create the providers or renderToReadableStream functions yourself.

This would make adoption easier and might lead to others making their own plugins to share with others.

Plugins would have a server and app version. They would need to be composible so that if you provide a list of plugins, it will combine them without conflicts.

After creating the plugins interface, implement twind and react-query plugins and update the examples to use them.