ryannhg/elm-spa
1
1
Fork 0
mirror of https://github.com/ryannhg/elm-spa.git synced 2024-11-27 16:12:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

Change username

Browse Source
This commit is contained in:
Ryan Haskell-Glatz 2024-03-12 18:23:31 -05:00
parent 353552d9f1
commit dc533e6771
20 changed files with 65 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -35,6 +35,6 @@ __Visit the official site__ at [elm-spa.dev](https://elm-spa.dev) for more examp
### **Do I need the Elm package?** ### **Do I need the Elm package?**
If you are using elm-spa, there's no need to read the [ryannhg/elm-spa](https://package.elm-lang.org/packages/ryannhg/elm-spa/latest/) package documentation. The package only exists to constrain the CLI, and provides a few basic internal helper functions. If you are using elm-spa, there's no need to read the [ryan-haskell/elm-spa](https://package.elm-lang.org/packages/ryan-haskell/elm-spa/latest/) package documentation. The package only exists to constrain the CLI, and provides a few basic internal helper functions.
Check out [the official website](https://elm-spa.dev) instead! Check out [the official website](https://elm-spa.dev) instead!

4
docs/elm.json
View File

@ -15,7 +15,7 @@
"elm/http": "2.0.0", "elm/http": "2.0.0",
"elm/json": "1.1.3", "elm/json": "1.1.3",
"elm/url": "1.0.0", "elm/url": "1.0.0",
"ryannhg/elm-spa": "6.0.0" "ryan-haskell/elm-spa": "6.0.0"
}, },
"indirect": { "indirect": {
"elm/bytes": "1.0.8", "elm/bytes": "1.0.8",
@ -31,4 +31,4 @@
"direct": {}, "direct": {},
"indirect": {} "indirect": {}
} }
} }

16
docs/public/content/examples.md
View File

@ -1,6 +1,6 @@
# Examples # Examples
Prefer to learn by example? Wonderful! The source code for all of the examples on this site can be found in the GitHub repo's [examples](https://github.com/ryannhg/elm-spa/tree/main/examples) folder. Prefer to learn by example? Wonderful! The source code for all of the examples on this site can be found in the GitHub repo's [examples](https://github.com/ryan-haskell/elm-spa/tree/main/examples) folder.
### Hello, world! ### Hello, world!
@ -38,36 +38,36 @@ Source code: [GitHub](https://github.com/bigardone/elm-css-patterns)
### RealWorld Conduit App ### RealWorld Conduit App
_Author_: [@ryannhg](https://github.com/ryannhg) _Author_: [@ryan-haskell](https://github.com/ryan-haskell)
Implements the [RealWorld app](https://github.com/gothinkster/realworld), inspired by Richard Feldman's "elm-spa-example" project. Implements the [RealWorld app](https://github.com/gothinkster/realworld), inspired by Richard Feldman's "elm-spa-example" project.
[![Realworld app screenshot](/content/images/realworld.png)](https://realworld.elm-spa.dev) [![Realworld app screenshot](/content/images/realworld.png)](https://realworld.elm-spa.dev)
Source code: [GitHub](https://github.com/ryannhg/elm-spa-realworld) Source code: [GitHub](https://github.com/ryan-haskell/elm-spa-realworld)
### This website ### This website
_Author_: [@ryannhg](https://github.com/ryannhg) _Author_: [@ryan-haskell](https://github.com/ryan-haskell)
The website you are looking at _right now_ was built with __elm-spa__. Mindbending, right? The website you are looking at _right now_ was built with __elm-spa__. Mindbending, right?
[![Realworld app screenshot](/content/images/this-site.png)](https://elm-spa.dev) [![Realworld app screenshot](/content/images/this-site.png)](https://elm-spa.dev)
Source code: [GitHub](https://github.com/ryannhg/elm-spa/tree/main/docs) Source code: [GitHub](https://github.com/ryan-haskell/elm-spa/tree/main/docs)
## More examples ## More examples
There are more examples available on the official repo: There are more examples available on the official repo:
__[Working with NPM 🔗](https://github.com/ryannhg/elm-spa/tree/main/examples/05-vite)__ __[Working with NPM 🔗](https://github.com/ryan-haskell/elm-spa/tree/main/examples/05-vite)__
Use [Vite](https://vitejs.dev/) instead of the default __elm-spa server__ command. This gives you access to NPM, reading environment variables, and fancier JS ecosystem stuff. Use [Vite](https://vitejs.dev/) instead of the default __elm-spa server__ command. This gives you access to NPM, reading environment variables, and fancier JS ecosystem stuff.
__[Testing 🔗](https://github.com/ryannhg/elm-spa/tree/main/examples/06-testing)__ __[Testing 🔗](https://github.com/ryan-haskell/elm-spa/tree/main/examples/06-testing)__
Use [elm-test](https://github.com/elm-explorations/test) and [elm-program-test](https://elm-program-test.netlify.app/) to write unit and end-to-end tests for your single page application. Use [elm-test](https://github.com/elm-explorations/test) and [elm-program-test](https://elm-program-test.netlify.app/) to write unit and end-to-end tests for your single page application.
__[Using Elm UI 🔗](https://github.com/ryannhg/elm-spa/tree/main/examples/07-elm-ui)__ __[Using Elm UI 🔗](https://github.com/ryan-haskell/elm-spa/tree/main/examples/07-elm-ui)__
Use the wonderful [elm-ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest) package to create web UIs without the need for HTML or CSS. This example can also be applied to [elm-css](https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/) or any other custom UI of your choice. Use the wonderful [elm-ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest) package to create web UIs without the need for HTML or CSS. This example can also be applied to [elm-css](https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/) or any other custom UI of your choice.

2
docs/public/content/examples/01-hello-world.md
View File

@ -1,6 +1,6 @@
# Hello, world! # Hello, world!
__Source code__: [GitHub](https://github.com/ryannhg/elm-spa/tree/main/examples/01-hello-world) __Source code__: [GitHub](https://github.com/ryan-haskell/elm-spa/tree/main/examples/01-hello-world)
Welcome to __elm-spa__! This guide is a breakdown of the simplest project you can make: the "Hello, world!" example. Welcome to __elm-spa__! This guide is a breakdown of the simplest project you can make: the "Hello, world!" example.

4
docs/public/content/examples/02-pages.md
View File

@ -1,6 +1,6 @@
# Pages & routing # Pages & routing
__Source code__: [GitHub](https://github.com/ryannhg/elm-spa/tree/main/examples/02-pages) __Source code__: [GitHub](https://github.com/ryan-haskell/elm-spa/tree/main/examples/02-pages)
This next guide will show you how pages, routing, and the `elm-spa add` command work together to automatically handle URLs in your __elm-spa__ application. This next guide will show you how pages, routing, and the `elm-spa add` command work together to automatically handle URLs in your __elm-spa__ application.
@ -288,7 +288,7 @@ layout children =
Feel free to play around with the `elm-spa add` command to mix-and-match different pages. Feel free to play around with the `elm-spa add` command to mix-and-match different pages.
As always, the source code for this example is available on [GitHub](https://github.com/ryannhg/elm-spa/tree/main/examples/02-pages) As always, the source code for this example is available on [GitHub](https://github.com/ryan-haskell/elm-spa/tree/main/examples/02-pages)
--- ---

4
docs/public/content/examples/03-storage.md
View File

@ -1,6 +1,6 @@
# Storage # Storage
__Source code__: [GitHub](https://github.com/ryannhg/elm-spa/tree/main/examples/03-local-storage) __Source code__: [GitHub](https://github.com/ryan-haskell/elm-spa/tree/main/examples/03-local-storage)
Let's start by creating a new project with the __elm-spa__ CLI: Let's start by creating a new project with the __elm-spa__ CLI:
@ -390,7 +390,7 @@ page shared _ =
In the browser, we now have a working counter app that persists on refresh. Even if you close the browser and open it up again, you'll see your previous counter value on the screen. In the browser, we now have a working counter app that persists on refresh. Even if you close the browser and open it up again, you'll see your previous counter value on the screen.
As a reminder, all the source code for this example is available on [GitHub](https://github.com/ryannhg/elm-spa/tree/main/examples/03-local-storage) As a reminder, all the source code for this example is available on [GitHub](https://github.com/ryan-haskell/elm-spa/tree/main/examples/03-local-storage)
--- ---

2
docs/public/content/examples/04-authentication.md
View File

@ -1,6 +1,6 @@
# User authentication # User authentication
__Source code__: [GitHub](https://github.com/ryannhg/elm-spa/tree/main/examples/04-authentication) __Source code__: [GitHub](https://github.com/ryan-haskell/elm-spa/tree/main/examples/04-authentication)
In a real world application, it's common to have the notion of a signed-in user. When it comes to routing, it's often useful to only allow signed-in users to visit specific pages. In a real world application, it's common to have the notion of a signed-in user. When it comes to routing, it's often useful to only allow signed-in users to visit specific pages.

6
docs/src/UI/Layout.elm
View File

@ -158,9 +158,9 @@ navbar { onMsg, model, shared, url } =
] ]
, Html.div [ Attr.class "row gap-md spread" ] , Html.div [ Attr.class "row gap-md spread" ]
[ Html.nav [ Attr.class "row gap-md hidden-mobile" ] [ Html.nav [ Attr.class "row gap-md hidden-mobile" ]
[ UI.iconLink { text = "GitHub Repo", icon = UI.icons.github, url = "https://github.com/ryannhg/elm-spa" } [ UI.iconLink { text = "GitHub Repo", icon = UI.icons.github, url = "https://github.com/ryan-haskell/elm-spa" }
, UI.iconLink { text = "NPM Package", icon = UI.icons.npm, url = "https://npmjs.org/elm-spa" } , UI.iconLink { text = "NPM Package", icon = UI.icons.npm, url = "https://npmjs.org/elm-spa" }
, UI.iconLink { text = "Elm Package", icon = UI.icons.elm, url = "https://package.elm-lang.org/packages/ryannhg/elm-spa/latest" } , UI.iconLink { text = "Elm Package", icon = UI.icons.elm, url = "https://package.elm-lang.org/packages/ryan-haskell/elm-spa/latest" }
] ]
, UI.Searchbar.view , UI.Searchbar.view
{ index = shared.index { index = shared.index
@ -178,7 +178,7 @@ footer =
Html.div [ Attr.class "footer__zone" ] Html.div [ Attr.class "footer__zone" ]
[ Html.footer [ Attr.class "footer container pad-top-xl" ] [ Html.footer [ Attr.class "footer container pad-top-xl" ]
[ Html.div [ Attr.class "row pad-x-md pad-y-lg pad-top-xl spread faded" ] [ Html.div [ Attr.class "row pad-x-md pad-y-lg pad-top-xl spread faded" ]
[ Html.a [ Attr.href "https://github.com/ryannhg/elm-spa/tree/main/docs", Attr.target "_blank", Attr.class "link hidden-mobile" ] [ Html.text "Site source code" ] [ Html.a [ Attr.href "https://github.com/ryan-haskell/elm-spa/tree/main/docs", Attr.target "_blank", Attr.class "link hidden-mobile" ] [ Html.text "Site source code" ]
, Html.span [] [ Html.text "© 2019 – 2021, Ryan Haskell-Glatz" ] , Html.span [] [ Html.text "© 2019 – 2021, Ryan Haskell-Glatz" ]
] ]
] ]

2
elm.json
View File

@ -1,6 +1,6 @@
{ {
"type": "package", "type": "package",
"name": "ryannhg/elm-spa", "name": "ryan-haskell/elm-spa",
"summary": "single page apps made easy.", "summary": "single page apps made easy.",
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"version": "6.0.0", "version": "6.0.0",

4
examples/01-hello-world/elm.json
View File

@ -13,7 +13,7 @@
"elm/html": "1.0.0", "elm/html": "1.0.0",
"elm/json": "1.1.3", "elm/json": "1.1.3",
"elm/url": "1.0.0", "elm/url": "1.0.0",
"ryannhg/elm-spa": "6.0.0" "ryan-haskell/elm-spa": "6.0.0"
}, },
"indirect": { "indirect": {
"elm/time": "1.0.0", "elm/time": "1.0.0",
@ -24,4 +24,4 @@
"direct": {}, "direct": {},
"indirect": {} "indirect": {}
} }
} }

4
examples/02-pages/elm.json
View File

@ -14,7 +14,7 @@
"elm/http": "2.0.0", "elm/http": "2.0.0",
"elm/json": "1.1.3", "elm/json": "1.1.3",
"elm/url": "1.0.0", "elm/url": "1.0.0",
"ryannhg/elm-spa": "6.0.0" "ryan-haskell/elm-spa": "6.0.0"
}, },
"indirect": { "indirect": {
"elm/bytes": "1.0.8", "elm/bytes": "1.0.8",
@ -27,4 +27,4 @@
"direct": {}, "direct": {},
"indirect": {} "indirect": {}
} }
} }

4
examples/03-local-storage/elm.json
View File

@ -13,7 +13,7 @@
"elm/html": "1.0.0", "elm/html": "1.0.0",
"elm/json": "1.1.3", "elm/json": "1.1.3",
"elm/url": "1.0.0", "elm/url": "1.0.0",
"ryannhg/elm-spa": "6.0.0" "ryan-haskell/elm-spa": "6.0.0"
}, },
"indirect": { "indirect": {
"elm/time": "1.0.0", "elm/time": "1.0.0",
@ -24,4 +24,4 @@
"direct": {}, "direct": {},
"indirect": {} "indirect": {}
} }
} }

4
examples/04-authentication/elm.json
View File

@ -13,7 +13,7 @@
"elm/html": "1.0.0", "elm/html": "1.0.0",
"elm/json": "1.1.3", "elm/json": "1.1.3",
"elm/url": "1.0.0", "elm/url": "1.0.0",
"ryannhg/elm-spa": "6.0.0" "ryan-haskell/elm-spa": "6.0.0"
}, },
"indirect": { "indirect": {
"elm/time": "1.0.0", "elm/time": "1.0.0",
@ -24,4 +24,4 @@
"direct": {}, "direct": {},
"indirect": {} "indirect": {}
} }
} }

4
examples/05-vite/elm.json
View File

@ -13,7 +13,7 @@
"elm/html": "1.0.0", "elm/html": "1.0.0",
"elm/json": "1.1.3", "elm/json": "1.1.3",
"elm/url": "1.0.0", "elm/url": "1.0.0",
"ryannhg/elm-spa": "6.0.0" "ryan-haskell/elm-spa": "6.0.0"
}, },
"indirect": { "indirect": {
"elm/time": "1.0.0", "elm/time": "1.0.0",
@ -24,4 +24,4 @@
"direct": {}, "direct": {},
"indirect": {} "indirect": {}
} }
} }

4
examples/06-testing/elm.json
View File

@ -13,7 +13,7 @@
"elm/html": "1.0.0", "elm/html": "1.0.0",
"elm/json": "1.1.3", "elm/json": "1.1.3",
"elm/url": "1.0.0", "elm/url": "1.0.0",
"ryannhg/elm-spa": "6.0.0" "ryan-haskell/elm-spa": "6.0.0"
}, },
"indirect": { "indirect": {
"elm/time": "1.0.0", "elm/time": "1.0.0",
@ -33,4 +33,4 @@
"elm/random": "1.0.0" "elm/random": "1.0.0"
} }
} }
} }

4
examples/07-elm-ui/elm.json
View File

@ -14,7 +14,7 @@
"elm/json": "1.1.3", "elm/json": "1.1.3",
"elm/url": "1.0.0", "elm/url": "1.0.0",
"mdgriffith/elm-ui": "1.1.8", "mdgriffith/elm-ui": "1.1.8",
"ryannhg/elm-spa": "6.0.0" "ryan-haskell/elm-spa": "6.0.0"
}, },
"indirect": { "indirect": {
"elm/time": "1.0.0", "elm/time": "1.0.0",
@ -25,4 +25,4 @@
"direct": {}, "direct": {},
"indirect": {} "indirect": {}
} }
} }

2
src/cli/README.md
View File

@ -37,7 +37,7 @@ Check out the official guide at https://elm-spa.dev!
The CLI is written with TypeScript + NodeJS. Here's how you can get started contributing: The CLI is written with TypeScript + NodeJS. Here's how you can get started contributing:
```bash ```bash
git clone git@github.com:ryannhg/elm-spa # clone the repo git clone git@github.com:ryan-haskell/elm-spa # clone the repo
cd elm-spa/src/cli # enter the CLI folder cd elm-spa/src/cli # enter the CLI folder
npm start # run first time dev setup npm start # run first time dev setup
``` ```

8
src/cli/package.json
View File

@ -14,7 +14,7 @@
}, },
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/ryannhg/elm-spa.git" "url": "git+https://github.com/ryan-haskell/elm-spa.git"
}, },
"keywords": [ "keywords": [
"elm", "elm",
@ -25,9 +25,9 @@
"author": "Ryan Haskell-Glatz", "author": "Ryan Haskell-Glatz",
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"bugs": { "bugs": {
"url": "https://github.com/ryannhg/elm-spa/issues" "url": "https://github.com/ryan-haskell/elm-spa/issues"
}, },
"homepage": "https://github.com/ryannhg/elm-spa#readme", "homepage": "https://github.com/ryan-haskell/elm-spa#readme",
"devDependencies": { "devDependencies": {
"@types/chokidar": "2.1.3", "@types/chokidar": "2.1.3",
"@types/jest": "26.0.14", "@types/jest": "26.0.14",
@ -45,4 +45,4 @@
"terser": "5.3.8", "terser": "5.3.8",
"websocket": "1.0.32" "websocket": "1.0.32"
} }
} }

46
src/cli/src/cli/build.ts
View File

@ -17,13 +17,13 @@ import { isStandardPage, isStaticPage, isStaticView, options, PageKind } from ".
import { createMissingAddTemplates } from "./_common" import { createMissingAddTemplates } from "./_common"
const elm = require('node-elm-compiler') const elm = require('node-elm-compiler')
export const build = ({ env, runElmMake } : { env : Environment, runElmMake: boolean }) => () => export const build = ({ env, runElmMake }: { env: Environment, runElmMake: boolean }) => () =>
Promise.all([ Promise.all([
createMissingDefaultFiles(), createMissingDefaultFiles(),
createMissingAddTemplates() createMissingAddTemplates()
]) ])
.then(createGeneratedFiles) .then(createGeneratedFiles)
.then(runElmMake ? compileMainElm(env): _ => ` ${check} ${bold}elm-spa${reset} generated new files.`) .then(runElmMake ? compileMainElm(env) : _ => ` ${check} ${bold}elm-spa${reset} generated new files.`)
const createMissingDefaultFiles = async () => { const createMissingDefaultFiles = async () => {
type Action type Action
@ -176,28 +176,28 @@ const compileMainElm = (env: Environment) => async () => {
debug: inDevelopment, debug: inDevelopment,
optimize: inProduction, optimize: inProduction,
}) })
.catch((error: Error) => { .catch((error: Error) => {
try { return colorElmError(JSON.parse(error.message.split('\n')[1])) } try { return colorElmError(JSON.parse(error.message.split('\n')[1])) }
catch { catch {
const { RED, green } = colors const { RED, green } = colors
return Promise.reject([ return Promise.reject([
`${RED}!${reset} elm-spa failed to understand an error`, `${RED}!${reset} elm-spa failed to understand an error`,
`Please report the output below to ${green}https://github.com/ryannhg/elm-spa/issues${reset}`, `Please report the output below to ${green}https://github.com/ryan-haskell/elm-spa/issues${reset}`,
`-----`, `-----`,
JSON.stringify(error, null, 2), JSON.stringify(error, null, 2),
`-----`, `-----`,
`${RED}!${reset} elm-spa failed to understand an error`, `${RED}!${reset} elm-spa failed to understand an error`,
`Please send the output above to ${green}https://github.com/ryannhg/elm-spa/issues${reset}`, `Please send the output above to ${green}https://github.com/ryan-haskell/elm-spa/issues${reset}`,
`` ``
].join('\n\n')) ].join('\n\n'))
} }
}) })
} }
type ElmError type ElmError
= ElmCompileError = ElmCompileError
| ElmJsonError | ElmJsonError
type ElmCompileError = { type ElmCompileError = {
type: 'compile-errors' type: 'compile-errors'
errors: ElmProblemError[] errors: ElmProblemError[]
@ -225,11 +225,11 @@ const compileMainElm = (env: Environment) => async () => {
string: string string: string
} }
const colorElmError = (output : ElmError) => { const colorElmError = (output: ElmError) => {
const errors : ElmProblemError[] = const errors: ElmProblemError[] =
output.type === 'compile-errors' output.type === 'compile-errors'
? output.errors ? output.errors
: [ { path: output.path, problems: [output] } ] : [{ path: output.path, problems: [output] }]
const strIf = (str: string) => (cond: boolean): string => cond ? str : '' const strIf = (str: string) => (cond: boolean): string => cond ? str : ''
const boldIf = strIf(bold) const boldIf = strIf(bold)
@ -274,7 +274,7 @@ const compileMainElm = (env: Environment) => async () => {
.then(_ => [success() + '\n']) .then(_ => [success() + '\n'])
} }
const ensureElmIsInstalled = async (environment : Environment) => { const ensureElmIsInstalled = async (environment: Environment) => {
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
ChildProcess.exec('elm', (err) => { ChildProcess.exec('elm', (err) => {
if (err) { if (err) {

4
src/cli/src/new/elm.json
View File

@ -13,7 +13,7 @@
"elm/html": "1.0.0", "elm/html": "1.0.0",
"elm/json": "1.1.3", "elm/json": "1.1.3",
"elm/url": "1.0.0", "elm/url": "1.0.0",
"ryannhg/elm-spa": "6.0.0" "ryan-haskell/elm-spa": "6.0.0"
}, },
"indirect": { "indirect": {
"elm/time": "1.0.0", "elm/time": "1.0.0",
@ -24,4 +24,4 @@
"direct": {}, "direct": {},
"indirect": {} "indirect": {}
} }
} }