TODO.md

TODO

• === release 2.0 ===
• Fixes for project template:
  • Fix indent on main function
  • Update nodemon watch list to include public dir and all file extensions
  • Fix gitignore not getting renamed to .gitignore
  • bump and release cli
• Devbox?
• project generator should set up shared code directory
• v3 branch
  • Annoyance with needing a full program and multiple update cycles to run tasks since Response.send is a CMD...
    • Move SimpleRouter.defineProgram to Prettynice.defineSimpleRouter and remove SimpleRouter
    • Add Prettynice.defineRouter with Task Never Response
    • Try replacing onRequest in defineProgram with router so programs just add update and subscriptions instead of merging router into update. This makes it easier to upgrade from router to program, and lets you continue having a simple way to respond with tasks instead of needing to roll your own once you upgrade (e.g. https://gist.github.com/blaix/106365cd437e776332ba15bab8a24c90).
    • Update examples/next to use the new defineRouter, etc. where appropriate
    • Use this "ResponseReady" pattern for full program examples: https://gist.github.com/blaix/106365cd437e776332ba15bab8a24c90
  • Update README and gren package docs with changes
  • Create v3 website and update to show progression from defineSimpleRouter -> defineRouter -> defineProgram
    • Consider a diff-based approach like the README for https://github.com/edkelly303/elm-composer
    • Take some inspiration from: https://fresh.deno.dev/
    • Update v1 and v2 version of website with a banner pointing to prettynice.dev for redirect to latest version
  • Update examples/v2 to use hardcoded v2 of prettynice in gren.json
  • Address TODO comments
  • npm install whatever should be enough to make whatever available in client-side component .js files. (already works server-side).
  • Consider support for server-sent events
  • Update v3 website to point to new sections of the gren book where appropriate
  • Add server and client js dependencies to docs (README and website).
  • Merge
  • See notes/releasing.md
• == release 3.0 ==
• Create a starter repo using github templates
• Video showing benefits of fullstack type safety: update view in client component and watch compiler guide you to changes all the way down to the server.
• Example & documentation for building a SPA
  • Entire app in a client/src/Main.gren component
  • Communicates with server/src/Main.gren via HTTP client
  • Great for a PWA - show how to do this?
• Look at https://github.com/edkelly303/elm-composer - may be ideas here that are useful
• Is it possible to have a websockets example yet?
• listen to lustre episode of developer voices and check out the links
• Options for project generator
  • default: defineSimpleRouter
  • router: defineRouter
  • program: defineProgram
• Add a component generator to cli
• Experiment/Idea: server-side TEA
• 2.0 doc site:
  • Think about versioning...
  • Update doc links to use major version prefix: gren-lang/package.gren-lang.org#39
  • Find appropriate place to include instructions for the "full program" version of generator
  • [o] Flesh out gren guide as needed:
    • Add applications section:
      • The Elm Architecture
        • See evan's original tutorial on this: https://github.com/evancz/elm-architecture-tutorial/tree/2ce0f550cb6331cd5659e6a39095ce8ebfef34c0
        • Good stuff in the lustre docs too: https://github.com/lustre-labs/lustre/blob/main/pages/guide/02-state-management.md
      • Browser Applications
      • Node Applications
    • Add "gren for elm programmers" to appendix?
    • Elaborate on the FAQ section about differences from elm
  • Flesh out remaining pages
  • Link on github project settings and README
  • Link to relevant sections from the example READMEs
  • Link in the error message for failed props parsing
  • https://www.youtube.com/watch?v=jIPZlrCpwiE should probably be in the docs somewhere...
  • Deployment example + docs.
    • sqlite vs postgresql (easy local dev vs easy management deployment?)
    • Fly.io vs Render.com
    • docker?
    • caddy as reverse proxy (and serving static)?
• Basic offline support with https://github.com/DannyMoerkerke/basic-service-worker ?
• Blog post about prettynice?
• RealWorld example? TodoMVC example? Blog? Live code it?
• Add more examples:
  • basic auth
  • cookies
  • HTMX?
• Vite support? (required for pencils?):
  • FIRST: consider web components to clean up the "isolate element" js
  • ALSO FIRST: consider esbuild instead of vite:
    • Worried vite is overkill, changes too rapidly, and has too much happening implicitly / under the hood
    • Stuff like this is very troubling (prod vs dev inconsistencies): https://twitter.com/ryanflorence/status/1782409358057603439
  • Use one of the gren vite plugins?:
    • https://github.com/gabriela-sartori/vite-plugin-gren (original?)
    • https://github.com/laurentpayot/vite-plugin-gren (links to gabriella's as "original". why was this created?)
  • Create a prettynice-specific plugin? https://vitejs.dev/guide/api-plugin
  • Replace CodeGen.copyPublicDir with vite:
    • Configure the public dir?
    • An assets dir? Lets you have a tailwind.css that's transformed.
    • Confusing to have both assets and public?
    • How to make it not suck to reference assets from gren code in a way vite will recognize?
  • Handle imports in ComponentName.js for (codemirror for pencils, etc.)
  • client/src/app.{js,ts} entry point?
  • Styling? See pencils/notes/UI.md
  • On the node side:
    • how does vite normally integration with node? https://www.npmjs.com/package/vite-node ?
    • Handle imports - wait how is prisma working now...?
    • server/src/app.{js,ts} entry point?
    • what does this mean for ports.js?
  • Nice to haves:
    • Full-color errors and jump to editor support? https://twitter.com/rhg_dev/status/1779998936578605493
• Experiment with nested TEA again e.g. standalone modules per route. See examples/next/tea-modules.
  • LOTS of potential here! => see https://dev.to/jmpavlick/for-lack-of-a-better-name-im-calling-it-the-module-pattern-5dfi
  • and https://dark.elm.dmy.fr/packages/lue-bird/elm-state-interface/latest/
  • and https://discourse.elm-lang.org/t/what-are-your-thoughts-on-the-translator-pattern-for-child-parent-communication/9730
• Experiment with htmx and hyperview:
  • https://hypermedia.systems/
  • https://htmx.org/essays/when-to-use-hypermedia/
  • See this experiment / write-up by Mario: https://github.com/supermario/elm-htmx
  • May be able to incorporate the core 80% without using the library: https://joshi.monster/posts/build-your-own-htmx/
  • Server-side only dynamic interactions. All logic in one place. Grug like.
  • Use case: add/edit/delete items from todo list.
  • Hyperview for mobile...?
  • Also look at liveview
  • ...and SSE
• See notes/js-task.md. Do I need some kind of composable, Task-like interface for js functions yet (will pencils need this for db calls?)?
  • Would JTD be any help here? See https://github.com/BrianHicks/elm-duet
• Consider the list of sveltekit features which mirror a lot of what I want out of a framework: https://kit.svelte.dev/ (see "features? we got em.")
• Test Sourcemaps
• Gren compiler errors losing colors in "npm run dev" output?
• Post video(s) showing off full-stack type safety
• See https://github.com/MaeBrooks/gren-webserver - there's some cool ideas in here.
• Look at mdgriffith's elm-prefab: https://github.com/mdgriffith/elm-prefab/tree/main/guides - cool ideas here too
• Add a Dockerfile to the project template?
• Add tests to the template app
• Add __filename to Node env, splitPath to FileSystem, and replace cli's dirname port call: https://gren.zulipchat.com/#narrow/stream/376306-ideas/topic/Node.20bindings.20to.20__dirname.3F/near/425878041
• just publish-cli that runs build-cli and validates similar to gren package validate
• Unit Tests. Especially Prettynice.Internal.Props
• Functional browser tests with playwright or similar
• Windows support: Remove POSIX path coupling from CodeGen (Shikensu's *Posix functions and hardcoded "/")
• Think about CSS post-processing:
  • tailwind? (meh)
  • bulma.io looks nice (no js!), maybe worth a UI package? look at https://package.elm-lang.org/packages/surprisetalk/elm-bulma/
  • look at https://www.npmjs.com/package/@ryannhg/css-in-elm
• Think about JS bundling/transpiling:
  • vite? support importing .gren files?
  • swc?
• Cookies & Sessions
• Consider: what if I want traditional Flags from js? (right now prettynice controls this to do Props)
• RealWorld example app
• Redirect helpers?
• Handle multipart/form-data and file uploads
• Responses that align with the request content-type (e.g. 404 that returns html, string, or json depending on the request)
• Support records and custom types in component Props field types? See https://github.com/stil4m/elm-syntax for possible reference/example. Or worth waiting for gren-in-gren?
• Future ideas / Experiments:
  • component events that can trigger server-side messages: https://gist.github.com/blaix/5184b52b28f53c8019eca4a91e2fa868
  • HTM[X|Z] integration:
    • Form submissions? See https://remix.run/docs/en/main/components/form
    • Server-side components?
    • toBackend/toFrontend messages?
    • replacing the generated script tag with an hx-trigger? https://twitter.com/RustyVermeer/status/1784972656749768739
    • If I just need to replace elements on the page: https://leanrada.com/htmz/
    • What about slow connections / failed js loading? See https://www.youtube.com/watch?v=EzLGleT1yrY
• Speed up build step. Parallelize build tasks? (codegen has to happen before client/server builds)
• Experiment with portals. Would this help with components at all?
  • https://react.dev/reference/react-dom/createPortal
  • https://wolfgangschuster.wordpress.com/2023/06/21/bring-your-own-dom-part-1-portals/)?
• Audit error messages

Open questions and future ideas

• No good way to get port and host from env vars for Prettynice.startProgram. Currently must be hard-coded or passed in via argv[].
• Is there anything that can be done about the duplication between Prettynice.gren and Prettynice.SimpleRouter.gren?
• Should there be a prettynice cli "serve" command?
  • Originally tried to do this but having trouble getting server's stdout to pass through the parent process
  • Is there any benefit over running the built server with node directly?
• Databases:
  • db-over-http once node HttpClient lands:
    • couchdb / pouchdb
    • AWS RDS Data API: https://docs.aws.amazon.com/rdsdataservice/latest/APIReference/API_ExecuteSql.html
    • sqlite-over-http? https://github.com/proofrock/ws4sqlite
  • expand on ports/prisma example?
  • direct connection over tcp?:
    • kernel bindings for node's 'net' api
    • webcrypto for passwords? (joeybright working on this?)
    • example here: https://github.com/Asaye/PgDriverDemo (explanation here: https://info.deal-corner.com/post/311c1057-f94b-4b48-aadc-02de4ee5f0e0)
    • see this old package for a simpler reference than the current node pg package: https://github.com/creationix/postgres-js
  • See https://github.com/pghttp and elm-pghttp channel in incremental elm discord
• SSE? Websockets?
• SSR + hydration for components? Is there value?
• Emails? (Mario from Lamdera recommends https://postmarkapp.com/)
• Metrics and observability?
  • Prometheus (integrates with Caddy https://caddyserver.com/docs/metrics)?
  • https://opentelemetry.io/ ?
• New Temporal API coming for dates/times? https://github.com/tc39/proposal-temporal
• Anything to do with webcomponents?: shoelace?
• Any ideas to steal from Lustre server components?
• Look at mdgriffith's elm-prefab: https://github.com/mdgriffith/elm-prefab/blob/main/guides/
• Look at elm-duet and json type definitions
• gren run package-name to replace npm package and stop exposing Prettynice.Internal
• offline-first PWA experiment
  • https://docs.yjs.dev/
  • Learn about CRDTS. Start here: https://docs.yjs.dev/api/internals