41 |
44 | Learn More →
45 |
46 |
47 |
16 | Drop files here
17 |
18 | ...
19 | }
20 | ```
21 |
22 | That's it! **LiveViewJS** will automatically handle the rest. The user will be able to drag and drop files into the div
23 | and they will be added to the entries of that upload config. 🤯
24 |
25 | ## Credit where credit is due
26 |
27 | Thanks to the Phoenix LiveView folks that built this! 🙌 This is a great example of why we built on top of the existing
28 | LiveView client-side JS.
29 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/docs/08-file-upload/image-preview.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 2
3 | ---
4 |
5 | # Built-in Image Preview
6 |
7 | LiveViewJS ships with build-in support for image previews when uploading files.
8 |
9 | ## Getting Entries from `meta.uploads`
10 |
11 | The list of `UploadEntry` objects for a given upload config can be found in the `meta.uploads` object based on the name
12 | you provided when configuring it using the `allowUpload` method. For example, if you configured an upload config named
13 | `photos`, you can access the list of `UploadEntry` objects using `meta.uploads.photos`. Here is an example of accessing
14 | the list of `UploadEntry` objects for a given upload config:
15 |
16 | ```ts
17 | ...
18 | render: (context, meta) => {
19 | ...
20 |
21 | ${meta.uploads.photos.map((entry) => {
22 | return html`
23 |
24 | `;
25 | })}
26 |
27 | ...
28 | }
29 | ```
30 |
31 | ## `live_img_preview` Tag
32 |
33 | In order to use the built-in image preview, you must use the `live_img_preview` tag. This tag takes a `UploadEntry` and
34 | renders an image preview of it.
35 |
36 | ```ts
37 | ...
38 | render: (context, meta) => {
39 | ...
40 | ${live_img_preview(entry)}
41 | ...
42 | }
43 | ```
44 |
45 | ## All Together now
46 |
47 | ```ts
48 | ...
49 | render: (context, meta) => {
50 | ...
51 |
52 | ${meta.uploads.photos.map((entry) => {
53 | return html`
54 |
58 | ...
59 | }
60 | ```
61 |
62 | That's it! 🤯
63 |
64 | ## Credit where credit is due
65 |
66 | Thanks to the Phoenix LiveView folks that built this! 🙌 This is a great example of why we built on top of the existing
67 | LiveView client-side JS.
68 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/docs/08-file-upload/upload-config-options.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 4
3 | ---
4 |
5 | # Upload Config Options
6 |
7 | These are the options you can pass into the `allowUpload` method to configure the upload.
8 |
9 | - `accept`: an array of strings that represent the file extensions and/or mime types that are allowed to be uploaded.
10 | For example, `[".png", ".jpg", ".jpeg", ".gif"]` will only allow images to be uploaded. See
11 | [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)
12 | for more information. Defaults to `[]` (no restrictions)
13 | - `maxEntries`: the maximum number of files that can be uploaded. If the user tries to upload more than this number of
14 | files, an error will be present in the upload config. Defaults to `1`.
15 | - `maxFileSize`: the maximum file size (in bytes) that can be uploaded. If the user tries to upload a file that is
16 | larger than this number, an error will be present in the upload config. Defaults to `10 * 1024 * 1024` (10MB).
17 | - `autoUpload`: if `true`, the file will be uploaded as soon as it is selected by the user. If `false`, the file will
18 | not be uploaded until the user initiates the form's save event. The default is `false`.
19 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/docs/09-real-time-multi-player-pub-sub/_category_.json:
--------------------------------------------------------------------------------
1 | {
2 | "label": "Real-time / Multi-player",
3 | "position": 9,
4 | "link": {
5 | "type": "generated-index",
6 | "description": "Easy real-time, multi-player support with LiveViewJS Pub/Sub"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/docs/10-client-javascript/_category_.json:
--------------------------------------------------------------------------------
1 | {
2 | "label": "Client-side Javascript",
3 | "position": 10,
4 | "link": {
5 | "type": "generated-index",
6 | "description": "How LiveView client-side Javascript works and how to use it"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/docs/10-client-javascript/example-hook.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 3
3 | ---
4 |
5 | # Example Hook
6 |
7 | Let's create a hook that will format a text input into a phone number as a user types.
8 |
9 | ## Hook Definition
10 |
11 | ```ts
12 | // Define the hook
13 | const PhoneNumber: ViewHook = {
14 | mounted() {
15 | this.el.addEventListener("input", (e) => {
16 | let match = this.el.value.replace(/\D/g, "").match(/^(\d{3})(\d{3})(\d{4})$/);
17 | if (match) {
18 | this.el.value = `${match[1]}-${match[2]}-${match[3]}`;
19 | }
20 | });
21 | },
22 | };
23 | // Add the hook to the LiveSocket
24 | let liveSocket = new LiveSocket("/live", Socket, {
25 | hooks: { PhoneNumber },
26 | });
27 | ```
28 |
29 | ## Hook Usage
30 |
31 | ```html
32 |
33 | ```
34 |
35 | ## Credit 🙌
36 |
37 | Credit for this example goes to the
38 | [Phoenix LiveView docs](https://hexdocs.pm/phoenix_live_view/js-interop.html#client-hooks-via-phx-hook). I didn't want
39 | to reinvent the wheel, so I just copied the example from the Phoenix LiveView docs, added some types, and simplified it
40 | a bit.
41 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/docs/11-js-commands/_category_.json:
--------------------------------------------------------------------------------
1 | {
2 | "label": "JS Commands",
3 | "position": 11,
4 | "link": {
5 | "type": "generated-index",
6 | "description": "Additional utilities for more dynamic, client-side experiences"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/docs/11-js-commands/dispatch-cmd.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 5
3 | ---
4 |
5 | # Dispatch Command
6 |
7 | The `dispatch` command dispatches a DOM event from the target element
8 |
9 | ```typescript
10 | new JS().dispatch(event: string, options?: DispatchOptions)
11 | ```
12 |
13 | - `event` - The name of the event to dispatch
14 | - `options` - Options for the command (optional)
15 | - `to` - An optional css selector to identify the element from which to dispatch. Defaults to the element that the JS
16 | Command is attached to.
17 | - `detail` - A optional map of key/value pairs to include in the event's `detail` property
18 | - `bubbles` - A optional boolean indicating whether the event should bubble up the DOM. Defaults to `true`
19 |
20 | **Note**: All events dispatched are of a type CustomEvent, with the exception of "click". For a "click", a MouseEvent is
21 | dispatched to properly simulate a UI click.
22 |
23 | For emitted CustomEvent's, the event detail will contain a dispatcher, which references the DOM node that dispatched the
24 | JS event to the target element.
25 |
26 | Examples
27 |
28 | ```html
29 | //... in your render function of a LiveView
30 |
31 | // dispatch a click
32 |
33 |
34 | // dispatch a custom event
35 |
38 | ${live_img_preview(entry)}
55 | `;
56 | })}
57 | Dispatch Target
39 | ```
40 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/docs/11-js-commands/push-cmd.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 7
3 | ---
4 |
5 | # Push Command
6 |
7 | The `push` command sends an event to the server
8 |
9 | ```typescript
10 | new JS().push(event: string, options?: PushOptions)
11 | ```
12 |
13 | - `event` - The name of the event to send to the server
14 | - `options` - Options for the command (optional)
15 | - `target` - An optional selector or component ID to push to
16 | - `loading` - An optional selector to apply the phx loading classes to
17 | - `page_loading` - An optional boolean indicating whether to trigger the "phx:page-loading-start" and
18 | "phx:page-loading-stop" events. Defaults to `false`
19 | - `value` An optional map of key/value pairs to include in the event's `value` property
20 |
21 | Examples
22 |
23 | ```html
24 | //... in your render function of a LiveView
25 |
26 | // push increment event to server
27 |
28 |
29 | // push decrement event to server
30 |
31 |
32 | // push increment event to server with a payload then hide the button
33 |
36 |
37 | // hide the button then push increment event
38 |
39 |
40 | // push incremenet and show page loading indicator
41 |
44 | ```
45 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/docs/11-js-commands/transition-cmd.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 6
3 | ---
4 |
5 | # Transition Command
6 |
7 | The `transition` command dispatches a DOM event from the target element
8 |
9 | ```typescript
10 | new JS().transition(transition: Transition, options?: TransitionOptions)
11 | ```
12 |
13 | - `transition` - The string of classes to apply to the element, or a 3-tuple containing the transition class, the class
14 | to apply to start the transition, and the class to apply to end the transition. e.g., ["ease-out duration-300",
15 | "opacity-100", "opacity-0"]
16 | - `options` - Options for the command (optional)
17 | - `to` - An optional css selector to identify the element from which to transition. Defaults to the element that the
18 | JS Command is attached to.
19 | - `time` - The time (in milliseconds) over which to apply the transition options. Defaults to 200
20 |
21 | Examples
22 |
23 | ```html
24 | //... in your render function of a LiveView
25 |
26 | // transition the target element
27 |
35 |
43 | Transition Target
44 |
45 | // transition button with a shake
46 |
47 | ```
48 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/docs/12-webserver-integration/_category_.json:
--------------------------------------------------------------------------------
1 | {
2 | "label": "Webserver Integrations",
3 | "position": 12,
4 | "link": {
5 | "type": "generated-index",
6 | "description": "How LiveViewJS integrates with webservers and how to add support for other webservers"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/docs/12-webserver-integration/support-webserver-x.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 3
3 | ---
4 |
5 | # Support Webserver "X"
6 |
7 | If you want to use LiveViewJS with a webserver that is not supported out of the box, you can implement the
8 | `LiveViewServerAdaptor` interface and plug it into your webserver.
9 |
10 | Essentially, you'll need to be able to intercept HTTP and websocket requests and pass them to the LiveViewJS library.
11 | The LiveViewJS library will then handle the requests and return the appropriate responses.
12 |
13 | ## Look at the existing integrations
14 |
15 | Checkout the LiveViewJS source code and look at the
16 | [`NodeExpressLiveViewServer`](https://github.com/floodfx/liveviewjs/blob/main/packages/express/src/node/server.ts) and
17 | [`DenoOakLiveViewServer`](https://github.com/floodfx/liveviewjs/blob/main/packages/deno/src/deno/server.ts) classes.
18 | These are the two webserver integrations that are supported out of the box.
19 |
20 | ## Open an issue
21 |
22 | We are happy to help you get LiveViewJS working with your webserver. If you
23 | [open an issue](https://github.com/floodfx/liveviewjs/issues) on the LiveViewJS GitHub repo, we'll be happy to support
24 | you.
25 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/docs/13-misc/_category_.json:
--------------------------------------------------------------------------------
1 | {
2 | "label": "Miscellaneous",
3 | "position": 13,
4 | "link": {
5 | "type": "generated-index",
6 | "description": "A potpourri of topics that don't fit elsewhere or are not large enough to warrant their own category"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/docs/13-misc/debugging-wire.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 4
3 | ---
4 |
5 | # Debugging LiveViews
6 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/docs/13-misc/flash.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 6
3 | ---
4 |
5 | # Flash Messages
6 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/docs/13-misc/root-and-page-renderers.md:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 5
3 | ---
4 |
5 | # Root and Page Renderers
6 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "liveviewjs-com",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "docusaurus": "docusaurus",
7 | "start": "docusaurus start",
8 | "build": "docusaurus build",
9 | "swizzle": "docusaurus swizzle",
10 | "deploy": "docusaurus deploy",
11 | "clear": "docusaurus clear",
12 | "serve": "docusaurus serve",
13 | "write-translations": "docusaurus write-translations",
14 | "write-heading-ids": "docusaurus write-heading-ids",
15 | "typecheck": "tsc",
16 | "format": "prettier --write '**/*.{ts,js,json,html,css,md}'"
17 | },
18 | "dependencies": {
19 | "@docusaurus/core": "2.0.1",
20 | "@docusaurus/plugin-google-gtag": "^2.1.0",
21 | "@docusaurus/preset-classic": "2.0.1",
22 | "@mdx-js/react": "^1.6.22",
23 | "clsx": "^1.2.1",
24 | "prism-react-renderer": "^1.3.5",
25 | "react": "^17.0.2",
26 | "react-dom": "^17.0.2"
27 | },
28 | "devDependencies": {
29 | "@docusaurus/module-type-aliases": "2.0.1",
30 | "@tsconfig/docusaurus": "^1.0.5",
31 | "autoprefixer": "^10.4.8",
32 | "postcss": "^8.4.16",
33 | "prettier": "^2.5.1",
34 | "tailwindcss": "^3.1.8",
35 | "typescript": "^4.7.4"
36 | },
37 | "browserslist": {
38 | "production": [
39 | ">0.5%",
40 | "not dead",
41 | "not op_mini all"
42 | ],
43 | "development": [
44 | "last 1 chrome version",
45 | "last 1 firefox version",
46 | "last 1 safari version"
47 | ]
48 | },
49 | "engines": {
50 | "node": ">=16.14"
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/sidebars.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Creating a sidebar enables you to:
3 | - create an ordered group of docs
4 | - render a sidebar for each doc of that group
5 | - provide next/previous navigation
6 |
7 | The sidebars can be generated from the filesystem, or explicitly defined here.
8 |
9 | Create as many sidebars as you want.
10 | */
11 |
12 | // @ts-check
13 |
14 | /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
15 | const sidebars = {
16 | // By default, Docusaurus generates a sidebar from the docs folder structure
17 | tutorialSidebar: [{ type: "autogenerated", dirName: "." }],
18 |
19 | // But you can create a sidebar manually
20 | /*
21 | tutorialSidebar: [
22 | {
23 | type: 'category',
24 | label: 'Tutorial',
25 | items: ['hello'],
26 | },
27 | ],
28 | */
29 | };
30 |
31 | module.exports = sidebars;
32 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/src/components/HomepageFeatures/styles.module.css:
--------------------------------------------------------------------------------
1 | .features {
2 | display: flex;
3 | align-items: center;
4 | padding: 2rem 0;
5 | width: 100%;
6 | }
7 |
8 | .featureSvg {
9 | height: 200px;
10 | width: 200px;
11 | }
12 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/src/pages/index.module.css:
--------------------------------------------------------------------------------
1 | /**
2 | * CSS files with the .module.css suffix will be treated as CSS modules
3 | * and scoped locally.
4 | */
5 |
6 | .heroBanner {
7 | padding: 4rem 0;
8 | text-align: center;
9 | position: relative;
10 | overflow: hidden;
11 | }
12 |
13 | @media screen and (max-width: 996px) {
14 | .heroBanner {
15 | padding: 2rem;
16 | }
17 | }
18 |
19 | .buttons {
20 | display: flex;
21 | align-items: center;
22 | justify-content: center;
23 | }
24 |
--------------------------------------------------------------------------------
/apps/liveviewjs.com/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import Link from '@docusaurus/Link';
4 | import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
5 | import Layout from '@theme/Layout';
6 | import HomepageFeatures from '@site/src/components/HomepageFeatures';
7 |
8 | import styles from './index.module.css';
9 |
10 | function HomepageHeader() {
11 | const {siteConfig} = useDocusaurusContext();
12 | return (
13 |
15 |
25 |
26 | LiveViewJS
16 |{siteConfig.tagline}
17 |
18 |
21 | Quick Start →
22 |
23 |
24 | ${ctx.count}
`;
14 | },
15 | });
16 | }
17 |
--------------------------------------------------------------------------------
/packages/core/src/server/test/wsAdaptor.ts:
--------------------------------------------------------------------------------
1 | import { WsAdaptor, WsCloseListener, WsMsgListener } from "../adaptor";
2 |
3 | export class TestWsAdaptor implements WsAdaptor {
4 | private sendFn: (msg: string) => void;
5 | #closeListener: WsCloseListener;
6 | #msgListener: WsMsgListener;
7 | closed: boolean = false;
8 | constructor(sendFn: (msg: string) => void) {
9 | this.sendFn = sendFn;
10 | }
11 | subscribeToClose(closeListener: WsCloseListener): void {
12 | this.#closeListener = closeListener;
13 | }
14 | send(message: string, errorHandler?: ((err: any) => void) | undefined): void {
15 | this.sendFn(message);
16 | }
17 | subscribeToMessages(msgListener: WsMsgListener): void {
18 | this.#msgListener = msgListener;
19 | }
20 | isClosed(): boolean {
21 | return this.closed;
22 | }
23 |
24 | async sendIncomingMsg(msg: string) {
25 | await this.#msgListener(Buffer.from(msg), false);
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/packages/core/src/server/upload/binaryUploadSerDe.test.ts:
--------------------------------------------------------------------------------
1 | import { Phx } from "../protocol/phx";
2 | import { BinaryUploadSerDe } from "./binaryUploadSerDe";
3 |
4 | describe("binary upload serde test", () => {
5 | it("live_img_preview", async () => {
6 | const serDe = new BinaryUploadSerDe();
7 |
8 | const byteSize = 1000;
9 | const parts = {
10 | joinRef: "joinRef",
11 | msgRef: "msgRef",
12 | topic: "lvu:$0",
13 | event: "binary_upload",
14 | payload: Buffer.alloc(byteSize),
15 | } as Phx.UploadMsg;
16 | const data = await serDe.serialize(parts);
17 | expect(data.length).toBe(
18 | 1000 + // data length
19 | 5 + // size header
20 | parts.joinRef.length +
21 | parts.msgRef.length +
22 | parts.topic.length +
23 | parts.event.length
24 | );
25 |
26 | const parts2 = await serDe.deserialize(data);
27 | expect(parts2.joinRef).toBe(parts.joinRef);
28 | expect(parts2.msgRef).toBe(parts.msgRef);
29 | expect(parts2.topic).toBe(parts.topic);
30 | expect(parts2.event).toBe(parts.event);
31 | expect(parts2.payload.length).toBe(byteSize);
32 | });
33 | });
34 |
--------------------------------------------------------------------------------
/packages/core/src/server/upload/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./uploadConfig";
2 | export * from "./uploadEntry";
3 |
--------------------------------------------------------------------------------
/packages/core/src/server/upload/uploadConfig.test.ts:
--------------------------------------------------------------------------------
1 | import { UploadConfig, UploadEntry } from ".";
2 |
3 | describe("additional uploadConfig test", () => {
4 | it("test too many files", async () => {
5 | const uc = new UploadConfig("foo", {
6 | accept: [".pdf"],
7 | max_entries: 1,
8 | });
9 | // override the ref so always the same for testing
10 | uc.ref = "phx-testid";
11 | const activeEntry = new UploadEntry(
12 | { name: "entry0", last_modified: 11111111, path: "somepath", ref: "0", size: 1000, type: "application/pdf" },
13 | uc
14 | );
15 | const doneEntry = new UploadEntry(
16 | { name: "entry1", last_modified: 11111111, path: "somepath", ref: "1", size: 1000, type: "application/pdf" },
17 | uc
18 | );
19 | doneEntry.updateProgress(100);
20 | uc.setEntries([activeEntry, doneEntry]);
21 | expect(uc.errors).toContain("Too many files");
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/packages/core/src/server/upload/uploadEntry.test.ts:
--------------------------------------------------------------------------------
1 | import { UploadConfig, UploadEntry } from ".";
2 | import { mime } from "../mime";
3 |
4 | describe("uploadEntry tests", () => {
5 | beforeAll(async () => {
6 | // force mime db to load
7 | await mime.load();
8 | });
9 | it("test too large", async () => {
10 | const uc = new UploadConfig("foo", {
11 | accept: [".pdf"],
12 | max_entries: 1,
13 | max_file_size: 100,
14 | });
15 | // override the ref so always the same for testing
16 | uc.ref = "phx-testid";
17 | const activeEntry = new UploadEntry(
18 | { name: "entry0", last_modified: 11111111, path: "somepath", ref: "0", size: 101, type: "application/pdf" },
19 | uc
20 | );
21 | uc.setEntries([activeEntry]);
22 | expect(uc.errors).toContain("Too large");
23 | });
24 |
25 | it("test found mime types", async () => {
26 | const uc = new UploadConfig("foo", {
27 | accept: ["image/png"],
28 | max_entries: 1,
29 | max_file_size: 1000,
30 | });
31 | // override the ref so always the same for testing
32 | uc.ref = "phx-testid";
33 | const activeEntry = new UploadEntry(
34 | { name: "entry0", last_modified: 11111111, path: "somepath", ref: "0", size: 100, type: "image/png" },
35 | uc
36 | );
37 | uc.setEntries([activeEntry]);
38 | expect(uc.errors).toHaveLength(0);
39 | });
40 | });
41 |
--------------------------------------------------------------------------------
/packages/core/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "esnext",
4 | "esModuleInterop": true,
5 | "noEmitOnError": true,
6 | "noFallthroughCasesInSwitch": true,
7 | "experimentalDecorators": true,
8 | "emitDecoratorMetadata": true,
9 | "strictPropertyInitialization": false,
10 | "declaration": true,
11 | "resolveJsonModule": true,
12 | "strict": true,
13 | "skipLibCheck": true,
14 | "target": "esnext",
15 | "lib": ["esnext"],
16 | "moduleResolution": "node",
17 | "types": ["node", "jest"],
18 | "outDir": "./build/tsc",
19 | "baseUrl": "."
20 | },
21 | "include": ["src/index.ts", "src/server/**/*", "src/server/adaptor/.ts"],
22 | "exclude": ["build", "dist", "node_modules", "packages"]
23 | }
24 |
--------------------------------------------------------------------------------
/packages/create-liveviewjs/.gitignore:
--------------------------------------------------------------------------------
1 | # make sure we don't check in local test dir
2 | my-liveviewjs-app/
3 | dist/
--------------------------------------------------------------------------------
/packages/create-liveviewjs/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .cache/
3 | .env
4 | dist/
5 | .parcel-cache/
6 | .DS_Store
7 | coverage/
8 | package-lock.json
--------------------------------------------------------------------------------
/packages/create-liveviewjs/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "tabWidth": 2,
3 | "useTabs": false,
4 | "printWidth": 120,
5 | "bracketSameLine": true
6 | }
--------------------------------------------------------------------------------
/packages/create-liveviewjs/README.md:
--------------------------------------------------------------------------------
1 | ## Create LiveViewJS App
2 |
3 | Ship faster and create dynamic front-end user experiences without writing front-end code with [LiveViewJS](https://liveviewjs.com).
4 |
5 | This tool helps you to create a new LiveViewJS application. To get started, open a new shell and run the following command:
6 |
7 | ```sh
8 | $ npx create-liveviewjs-app@latest
9 | ```
10 |
11 | Then follow the prompts...
12 |
13 | [Go here](https://liveviewjs.com) more information about LiveViewJS.
--------------------------------------------------------------------------------
/packages/create-liveviewjs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "create-liveview-app",
3 | "version": "0.0.4",
4 | "description": "Command line interface to easily create a new LiveViewJS app",
5 | "homepage": "https://liveviewjs.com",
6 | "license": "MIT",
7 | "repository": {
8 | "type": "git",
9 | "url": "https://github.com/floodfx/liveviewjs",
10 | "directory": "packages/create-liveviewjs"
11 | },
12 | "bugs": {
13 | "url": "https://github.com/floodfx/liveviewjs/issues"
14 | },
15 | "main": "./dist/cli.js",
16 | "bin": {
17 | "create-liveview-app": "./dist/cli.js"
18 | },
19 | "types": "./dist/cli.d.ts",
20 | "files": [
21 | "dist/*.js",
22 | "dist/templates/**/*"
23 | ],
24 | "scripts": {
25 | "build": "tsc",
26 | "watch": "tsc --watch",
27 | "local": "npm run prepublish; node dist/cli.js",
28 | "copy-templates": "cp -r templates/ dist/templates",
29 | "clean": "rm -rf dist",
30 | "prepublish": "npm run clean; npm run build; npm run copy-templates"
31 | },
32 | "keywords": [
33 | "liveviewjs",
34 | "liveview",
35 | "phoenix",
36 | "typescript",
37 | "javascript",
38 | "framework"
39 | ],
40 | "dependencies": {
41 | "fs-extra": "^10.0.0",
42 | "inquirer": "^8.0.0",
43 | "meow": "^7.1.1",
44 | "sort-package-json": "^1.54.0"
45 | },
46 | "devDependencies": {
47 | "@types/fs-extra": "^9.0.13",
48 | "@types/inquirer": "^7.3.1",
49 | "@types/node": "^17.0.10",
50 | "ts-jest": "^27.1.3",
51 | "ts-node": "^10.4.0",
52 | "typescript": "^4.5.4"
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/packages/create-liveviewjs/templates/liveviewjs-app/README.md:
--------------------------------------------------------------------------------
1 | # LiveViewJS
2 | This is a [LiveViewJS](https://github.com/floodfx/liveviewjs) application!
3 |
4 |
5 | ## To Run your LiveViewJS Application
6 | - `npm i`
7 | - `npm run start`
8 |
9 | [http://localhost:8080/employees](http://localhost:8080/employees)
10 |
11 | ## Environment Configuration
12 | [dotenv](https://github.com/motdotla/dotenv) used to configure environment variables. This requires a `.env` file in the root directory of the project.
13 |
--------------------------------------------------------------------------------
/packages/create-liveviewjs/templates/liveviewjs-app/app/assets/css/app.css:
--------------------------------------------------------------------------------
1 | /*
2 | We use Tailwindcss by default.
3 | */
4 | @tailwind base;
5 | @tailwind components;
6 | @tailwind utilities;
7 |
8 |
--------------------------------------------------------------------------------
/packages/create-liveviewjs/templates/liveviewjs-app/app/assets/js/app.ts:
--------------------------------------------------------------------------------
1 | import NProgress from "nprogress";
2 | import { Socket } from "phoenix";
3 | import "phoenix_html";
4 | import { LiveSocket } from "phoenix_live_view";
5 |
6 | const url = "/live";
7 |
8 | let Hooks = {
9 | /**
10 | * When applied (via phx-hook="NumberInput"), this hook only allows
11 | * numbers to be entered into a text input field.
12 | */
13 | NumberInput: {
14 | mounted() {
15 | this.el.addEventListener("input", (e) => {
16 | // replace all non-numeric characters with empty string
17 | this.el.value = this.el.value.replace(/\D/g, "");
18 | });
19 | },
20 | },
21 | };
22 |
23 | // @ts-ignore - document will be present in browser
24 | let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
25 | let liveSocket = new LiveSocket(url, Socket, { params: { _csrf_token: csrfToken }, hooks: Hooks });
26 |
27 | // Show progress bar on live navigation and form submits
28 | window.addEventListener("phx:page-loading-start", (info) => NProgress.start());
29 | window.addEventListener("phx:page-loading-stop", (info) => NProgress.done());
30 |
31 | // connect if there are any LiveViews on the page
32 | liveSocket.connect();
33 |
34 | // expose liveSocket on window for web console debug logs and latency simulation:
35 | liveSocket.enableDebug();
36 | // >> liveSocket.enableLatencySim(1000)
37 | // @ts-ignore - window will be present in the browser
38 | window.liveSocket = liveSocket;
39 |
--------------------------------------------------------------------------------
/packages/create-liveviewjs/templates/liveviewjs-app/app/controllers/root/rootController.ts:
--------------------------------------------------------------------------------
1 | import { Request, Response } from "express";
2 |
3 | /**
4 | * Placeholder / example "traditional" http controller for the root route as
5 | * opposed to a "LiveView" controller.
6 | */
7 | class RootController {
8 | index(req: Request, res: Response) {
9 | res.render(`root/index`);
10 | }
11 | }
12 |
13 | const rootController = new RootController();
14 |
15 | export { rootController };
16 |
--------------------------------------------------------------------------------
/packages/create-liveviewjs/templates/liveviewjs-app/app/liveviews/demos/clickLiveView.ts:
--------------------------------------------------------------------------------
1 | import { SessionData } from "express-session";
2 | import { BaseLiveView, html, LiveViewContext, LiveViewExternalEventListener, LiveViewMeta, LiveViewMountParams, LiveViewSocket, LiveViewTemplate } from "liveviewjs";
3 |
4 | interface ClickDemoContext extends LiveViewContext{
5 | count: number;
6 | }
7 |
8 | export class ClickDemo extends BaseLiveView
26 |
32 | `
33 | }
34 | }
--------------------------------------------------------------------------------
/packages/create-liveviewjs/templates/liveviewjs-app/app/middleware/demoTimestamp.ts:
--------------------------------------------------------------------------------
1 | import { NextFunction, Request, Response } from "express";
2 |
3 | /**
4 | * Sammple middleware that logs the current timestamp to the console wiht
5 | * the request method and url.
6 | */
7 | export const logTimestamp = (req: Request, res: Response, next: NextFunction) => {
8 | console.log(`${req.method} ${req.url} - ${new Date().toISOString()}`);
9 | next();
10 | };
11 |
--------------------------------------------------------------------------------
/packages/create-liveviewjs/templates/liveviewjs-app/app/models/counter.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/create-liveviewjs/templates/liveviewjs-app/app/models/counter.ts
--------------------------------------------------------------------------------
/packages/create-liveviewjs/templates/liveviewjs-app/app/services/inMemory.ts:
--------------------------------------------------------------------------------
1 | import { LiveViewChangesetFactory, newChangesetFactory } from "liveviewjs";
2 | import { SomeZodObject } from "zod";
3 |
4 |
5 | export class InMemoryService
27 |
31 | Click Demo
28 | 29 |Count: ${context.count}
30 |
15 | <%- inner_content %>
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/packages/create-liveviewjs/templates/liveviewjs-app/app/views/root/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 17 | Welcome to LiveViewJS! 18 |
19 |This is the default (traditional) page. Click here for your first LiveViewJS Demo.
20 |
31 |
35 | `;
36 | },
37 | });
38 |
--------------------------------------------------------------------------------
/packages/examples/src/liveviews/decarbonize/index.ts:
--------------------------------------------------------------------------------
1 | import { AnyLiveEvent, createLiveView, html } from "liveviewjs";
2 | import { calcLiveComponent, footprintLiveComponent } from "./liveComponent";
3 |
4 | // define the info this LiveView will receive from the child LiveComponent
5 | export type FootprintData = {
6 | vehicleCO2Tons: number;
7 | spaceHeatingCO2Tons: number;
8 | gridElectricityCO2Tons: number;
9 | };
10 |
11 | export type FootprintUpdateInfo = {
12 | type: "update";
13 | footprintData: FootprintData;
14 | };
15 |
16 | export const decarbLiveView = createLiveView<
17 | {
18 | footprintData?: FootprintData;
19 | },
20 | AnyLiveEvent,
21 | FootprintUpdateInfo
22 | >({
23 | mount: (socket) => {
24 | socket.pageTitle("Decarbonize Calculator");
25 | },
26 |
27 | // receive the info from the stateful child LiveComponent
28 | handleInfo: (info, socket) => {
29 | const { footprintData } = info;
30 | socket.assign({ footprintData });
31 | },
32 | render: async (context, meta) => {
33 | // use the live_component helper to render a `LiveComponent`
34 | const { footprintData } = context;
35 | const { live_component } = meta;
36 | return html`
37 | Count is: ${count}
32 | 33 | 34 |Decarbonize Calculator
38 |
39 | ${await live_component(calcLiveComponent, {
40 | vehicle: "gas",
41 | spaceHeating: "gas",
42 | gridElectricity: "grid",
43 | id: 1,
44 | })}
45 |
46 |
47 | ${await live_component(footprintLiveComponent, {
48 | data: footprintData,
49 | })}
50 |
51 | `;
52 | },
53 | });
54 |
--------------------------------------------------------------------------------
/packages/examples/src/liveviews/fetch/data.ts:
--------------------------------------------------------------------------------
1 | // see: https://xkcd.com/json.html
2 | export interface XkcdData {
3 | month: string;
4 | day: string;
5 | year: string;
6 | num: number;
7 | link: string;
8 | news: string;
9 | safe_title: string;
10 | transcript: string;
11 | alt: string;
12 | img: string;
13 | title: string;
14 | }
15 |
16 | export function randomXkcdNum(max: number): number {
17 | return Math.floor(Math.random() * max) + 1;
18 | }
19 |
20 | export function isValidXkcd(num: number, max: number) {
21 | return num >= 1 && num <= max;
22 | }
23 |
24 | export async function fetchXkcd(num?: number, max?: number): Promise15 | 16 | `; 17 | }, 18 | }); 19 | -------------------------------------------------------------------------------- /packages/examples/src/liveviews/liveNav/index.ts: -------------------------------------------------------------------------------- 1 | import { createLiveView, html } from "liveviewjs"; 2 | 3 | /** 4 | * Example showing how to use server-side live navigation. 5 | */ 6 | export const liveNavLV = createLiveView< 7 | { id?: string }, // Define LiveView Context / State 8 | { type: "patch"; id: string } | { type: "redirect"; path: string } // Define LiveView Events 9 | >({ 10 | handleParams: (url, socket) => { 11 | console.log("handleParams", url); 12 | if (url.searchParams.has("id")) { 13 | socket.assign({ id: url.searchParams.get("id")! }); 14 | } 15 | }, 16 | handleEvent: (event, socket) => { 17 | switch (event.type) { 18 | case "patch": 19 | socket.assign({ id: event.id }); 20 | socket.pushPatch(socket.url.pathname, new URLSearchParams({ id: event.id })); 21 | break; 22 | case "redirect": 23 | // extract first part of path (e.g. /liveNav) 24 | const path = socket.url.pathname.split("/")[1]; 25 | socket.pushRedirect("/" + path + event.path); 26 | break; 27 | } 28 | }, 29 | render: async (context) => { 30 | // render the view based on the state 31 | const { id } = context; 32 | return html` 33 |
34 |
38 | `;
39 | },
40 | });
41 |
--------------------------------------------------------------------------------
/packages/examples/src/liveviews/liveSearch/data.test.ts:
--------------------------------------------------------------------------------
1 | import { listStores, searchByCity, searchByZip } from "./data";
2 |
3 | describe("test stores", () => {
4 | it("stores list", () => {
5 | const stores = listStores();
6 | expect(stores.length).toBe(7);
7 | });
8 |
9 | it("stores searchByZip", () => {
10 | const stores = searchByZip("80204");
11 | expect(stores.length).toBe(4);
12 | });
13 |
14 | it("stores searchByCity", () => {
15 | const stores = searchByCity("Denver, CO");
16 | expect(stores.length).toBe(4);
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/packages/examples/src/liveviews/servers/data.ts:
--------------------------------------------------------------------------------
1 | export interface Server {
2 | id: string;
3 | name: string;
4 | status: string;
5 | deploy_count: number;
6 | size: number;
7 | framework: string;
8 | git_repo: string;
9 | last_commit_id: string;
10 | last_commit_message: string;
11 | }
12 |
13 | export function listServers(): Server[] {
14 | return servers;
15 | }
16 |
17 | const servers: Server[] = [
18 | {
19 | id: "1",
20 | name: "dancing-lizard",
21 | status: "up",
22 | deploy_count: 14,
23 | size: 19.5,
24 | framework: "Elixir/Phoenix",
25 | git_repo: "https://git.example.com/dancing-lizard.git",
26 | last_commit_id: "f3d41f7",
27 | last_commit_message: "If this works, I'm going disco 🕺",
28 | },
29 | {
30 | id: "2",
31 | name: "lively-frog",
32 | status: "up",
33 | deploy_count: 12,
34 | size: 24.0,
35 | framework: "Elixir/Phoenix",
36 | git_repo: "https://git.example.com/lively-frog.git",
37 | last_commit_id: "d2eba26",
38 | last_commit_message: "Does it scale? 🤔",
39 | },
40 | {
41 | id: "3",
42 | name: "curious-raven",
43 | status: "up",
44 | deploy_count: 21,
45 | size: 17.25,
46 | framework: "Ruby/Rails",
47 | git_repo: "https://git.example.com/curious-raven.git",
48 | last_commit_id: "a3708f1",
49 | last_commit_message: "Fixed a bug! 🐞",
50 | },
51 | {
52 | id: "4",
53 | name: "cryptic-owl",
54 | status: "down",
55 | deploy_count: 2,
56 | size: 5.0,
57 | framework: "Elixir/Phoenix",
58 | git_repo: "https://git.example.com/cryptic-owl.git",
59 | last_commit_id: "c497e91",
60 | last_commit_message: "First big launch! 🤞",
61 | },
62 | ];
63 |
--------------------------------------------------------------------------------
/packages/examples/src/liveviews/utils/index.ts:
--------------------------------------------------------------------------------
1 | export function numberToCurrency(amount: number) {
2 | var formatter = new Intl.NumberFormat("en-US", {
3 | style: "currency",
4 | currency: "USD",
5 | });
6 | return formatter.format(amount);
7 | }
8 |
--------------------------------------------------------------------------------
/packages/examples/src/rollupEntry.ts:
--------------------------------------------------------------------------------
1 | export * from "./liveviews/autoComplete";
2 | export * from "./liveviews/books";
3 | export * from "./liveviews/counter";
4 | export * from "./liveviews/counter/realtime";
5 | export * from "./liveviews/dashboard";
6 | export * from "./liveviews/decarbonize";
7 | export * from "./liveviews/fetch";
8 | export * from "./liveviews/hello/helloName";
9 | export * from "./liveviews/hello/helloToggleEmoji";
10 | export * from "./liveviews/jsCommands";
11 | export * from "./liveviews/liveNav";
12 | export * from "./liveviews/liveSearch";
13 | export * from "./liveviews/pagination";
14 | export * from "./liveviews/photos";
15 | export * from "./liveviews/prints";
16 | export * from "./liveviews/servers";
17 | export * from "./liveviews/sorting";
18 | export * from "./liveviews/volume";
19 | export * from "./liveviews/volunteers";
20 | export * from "./routeDetails";
21 |
--------------------------------------------------------------------------------
/packages/examples/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "esnext",
4 | "esModuleInterop": true,
5 | "noEmitOnError": true,
6 | "noFallthroughCasesInSwitch": true,
7 | "experimentalDecorators": true,
8 | "emitDecoratorMetadata": true,
9 | "strictPropertyInitialization": false,
10 | "declaration": true,
11 | "resolveJsonModule": true,
12 | "strict": true,
13 | "skipLibCheck": true,
14 | "target": "es2019",
15 | "moduleResolution": "node",
16 | "lib": ["es2019", "esnext.asynciterable"],
17 | "types": ["node"],
18 | "outDir": "./build",
19 | "baseUrl": "."
20 | },
21 | "include": ["./src/**/*.ts"],
22 | "exclude": ["build", "node_modules", "./**/*.test.ts", "denoRollupEntry.ts", "src/browser/index.ts"]
23 | }
24 |
--------------------------------------------------------------------------------
/packages/express/.gitignore:
--------------------------------------------------------------------------------
1 | public/*.png
2 | public/*.gif
3 | public/*.jpg
4 | public/*.jpeg
5 | public/*.pdf
6 | public/js/
7 |
8 |
--------------------------------------------------------------------------------
/packages/express/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
--------------------------------------------------------------------------------
/packages/express/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .cache/
3 | .env
4 | dist/
5 | .parcel-cache/
6 | .DS_Store
7 | coverage/
8 | package-lock.json
--------------------------------------------------------------------------------
/packages/express/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "tabWidth": 2,
3 | "useTabs": false,
4 | "printWidth": 120,
5 | "bracketSameLine": true
6 | }
--------------------------------------------------------------------------------
/packages/express/public/.keep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/express/public/.keep
--------------------------------------------------------------------------------
/packages/express/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/express/public/favicon.ico
--------------------------------------------------------------------------------
/packages/express/public/images/cats/clenil.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/express/public/images/cats/clenil.jpg
--------------------------------------------------------------------------------
/packages/express/public/images/cats/flippers.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/express/public/images/cats/flippers.jpg
--------------------------------------------------------------------------------
/packages/express/public/images/cats/jorts.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/express/public/images/cats/jorts.jpg
--------------------------------------------------------------------------------
/packages/express/public/images/cats/kipper.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/express/public/images/cats/kipper.jpg
--------------------------------------------------------------------------------
/packages/express/public/images/cats/lemmy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/express/public/images/cats/lemmy.jpg
--------------------------------------------------------------------------------
/packages/express/public/images/cats/lissy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/express/public/images/cats/lissy.jpg
--------------------------------------------------------------------------------
/packages/express/public/images/cats/mikkel.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/express/public/images/cats/mikkel.jpg
--------------------------------------------------------------------------------
/packages/express/public/images/cats/minka.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/express/public/images/cats/minka.jpg
--------------------------------------------------------------------------------
/packages/express/public/images/cats/misty.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/express/public/images/cats/misty.jpg
--------------------------------------------------------------------------------
/packages/express/public/images/cats/nelly.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/express/public/images/cats/nelly.jpg
--------------------------------------------------------------------------------
/packages/express/public/images/cats/ninj.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/express/public/images/cats/ninj.jpg
--------------------------------------------------------------------------------
/packages/express/public/images/cats/pollito.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/express/public/images/cats/pollito.jpg
--------------------------------------------------------------------------------
/packages/express/public/images/cats/siegfried.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/express/public/images/cats/siegfried.jpg
--------------------------------------------------------------------------------
/packages/express/public/images/cats/truman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/express/public/images/cats/truman.jpg
--------------------------------------------------------------------------------
/packages/express/public/images/cats/washy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/floodfx/liveviewjs/52633f3d03d0c23d8fff7fb290c54f28e7fc14da/packages/express/public/images/cats/washy.jpg
--------------------------------------------------------------------------------
/packages/express/src/client/index.ts:
--------------------------------------------------------------------------------
1 | import NProgress from "nprogress";
2 | import { Socket } from "phoenix";
3 | import "phoenix_html";
4 | import { LiveSocket, ViewHook } from "phoenix_live_view";
5 |
6 | /**
7 | * Define custom LiveView Hooks that can tap into browser events.
8 | * See: https://hexdocs.pm/phoenix_live_view/js-interop.html#client-hooks-via-phx-hook
9 | */
10 | let Hooks = {
11 | /**
12 | * This hook can be used by an input element to prevent input other than numbers.
13 | * e.g.
14 | */
15 | NumberInput: {
16 | mounted() {
17 | this.el.addEventListener("input", () => {
18 | // replace all non-numeric characters with empty string
19 | this.el.value = this.el.value.replace(/\D/g, "");
20 | });
21 | },
22 | } as ViewHook,
23 | };
24 |
25 | const url = "/live";
26 | let csrfToken = document.querySelector("meta[name='csrf-token']")?.getAttribute("content");
27 | let liveSocket = new LiveSocket(url, Socket, { params: { _csrf_token: csrfToken }, hooks: Hooks });
28 | window.addEventListener("phx:refresh", (e) => {
29 | console.log("phx:refresh", e);
30 | });
31 |
32 | // Show progress bar on live navigation and form submits
33 | window.addEventListener("phx:page-loading-start", (info) => NProgress.start());
34 | window.addEventListener("phx:page-loading-stop", (info) => NProgress.done());
35 |
36 | // connect if there are any LiveViews on the page
37 | liveSocket.connect();
38 |
39 | // expose liveSocket on window for web console debug logs and latency simulation:
40 | // liveSocket.enableDebug();
41 | // liveSocket.enableLatencySim(1000)
42 | (window as any).liveSocket = liveSocket;
43 |
--------------------------------------------------------------------------------
/packages/express/src/example/autorun_ios.ts:
--------------------------------------------------------------------------------
1 | import chalk from "chalk";
2 | import { ChildProcess, spawn } from "child_process";
3 | import esbuild from "esbuild";
4 |
5 | const outdir = "build";
6 | let runner: ChildProcess;
7 |
8 | function maybe_stop_child() {
9 | if (runner) {
10 | runner.kill();
11 | }
12 | }
13 |
14 | function run_child() {
15 | maybe_stop_child();
16 | runner = spawn("node", [`${outdir}/ios.js`]);
17 | runner.stdout!.on("data", (data) => process.stdout.write(chalk.blue(data.toString())));
18 | runner.stderr!.on("data", (data) => process.stderr.write(chalk.red(data.toString())));
19 | }
20 |
21 | function build_success() {
22 | console.log(chalk.green("build succeeded"));
23 | run_child();
24 | }
25 |
26 | function build_failure(error: unknown) {
27 | console.error(chalk.red("build failed"));
28 | console.error(error);
29 | maybe_stop_child();
30 | }
31 |
32 | esbuild
33 | .build({
34 | entryPoints: ["src/example/ios.ts"],
35 | outdir,
36 | bundle: true,
37 | format: "cjs",
38 | platform: "node",
39 | watch: {
40 | onRebuild(error) {
41 | if (error) {
42 | build_failure(error);
43 | } else {
44 | build_success();
45 | }
46 | },
47 | },
48 | })
49 | .then((result) => {
50 | if (result.errors.length > 0) {
51 | build_failure(result);
52 | } else {
53 | build_success();
54 | }
55 | });
56 |
--------------------------------------------------------------------------------
/packages/express/src/example/express.ts:
--------------------------------------------------------------------------------
1 | import express, { NextFunction, Request, Response } from "express";
2 | import session, { MemoryStore } from "express-session";
3 | import { LiveViewRouter } from "liveviewjs";
4 |
5 | // declare flash object is added to session data in express-session middleware
6 | declare module "express-session" {
7 | interface SessionData {
8 | flash: any;
9 | }
10 | }
11 |
12 | export function configureExpress(sessionSecret: string) {
13 | const app = express();
14 |
15 | // add static file serving
16 | app.use(express.static("public"));
17 |
18 | // configure express-session middleware
19 | app.use(
20 | session({
21 | secret: sessionSecret,
22 | resave: false,
23 | rolling: true,
24 | saveUninitialized: true,
25 | cookie: {
26 | secure: process.env.NODE_ENV === "production",
27 | sameSite: "strict",
28 | maxAge: 1000 * 60 * 60 * 24 * 7, // 7 days
29 | },
30 | store: new MemoryStore(),
31 | })
32 | );
33 |
34 | return app;
35 | }
36 |
37 | export function logRequests(router: LiveViewRouter): (req: Request, res: Response, next: NextFunction) => void {
38 | return async (req: Request, res: Response, next: NextFunction) => {
39 | const isLiveView = router.hasOwnProperty(req.path);
40 | console.log(`${req.method} ${isLiveView ? "LiveView" : ""} ${req.url} - ${new Date().toISOString()}`);
41 | next();
42 | };
43 | }
44 |
--------------------------------------------------------------------------------
/packages/express/src/example/index.ts:
--------------------------------------------------------------------------------
1 | import { Server } from "http";
2 | import { WebSocketServer } from "ws";
3 | import { NodeExpressLiveViewServer } from "../node/server";
4 | import { configureExpress, logRequests } from "./express";
5 | import { indexHandler } from "./indexHandler";
6 | import { htmlPageTemplate, wrapperTemplate } from "./liveTemplates";
7 | import { liveRouter } from "./liveview/router";
8 |
9 | // basic server options
10 | const signingSecret = process.env.SESSION_SECRET ?? "MY_VERY_SECRET_KEY";
11 | const port = process.env.PORT ?? 4001;
12 |
13 | // configure LiveViewJS server
14 | const liveServer = new NodeExpressLiveViewServer(
15 | liveRouter,
16 | htmlPageTemplate,
17 | signingSecret,
18 | { title: "Express Demo", suffix: " · LiveViewJS" },
19 | {
20 | wrapperTemplate,
21 | // onError: console.error, // print errors to console
22 | // debug: console.log, // print messages to console
23 | }
24 | );
25 |
26 | // configure express server
27 | const express = configureExpress(signingSecret);
28 | express.use(liveServer.httpMiddleware); // allow LiveViewJS to handle LiveView http requests
29 | express.use(logRequests(liveRouter)); // middleware to log requests
30 | express.get("/", indexHandler); // index route handler
31 |
32 | // configure http server to send requests to express
33 | const server = new Server();
34 | server.on("request", express);
35 |
36 | // configure websocket server to send requests to LiveViewJS
37 | const ws = new WebSocketServer({ server });
38 | ws.on("connection", liveServer.wsMiddleware);
39 |
40 | // listen for requests
41 | server.listen(port, () => {
42 | console.log(`LiveViewJS is listening at: http://localhost:${port}`);
43 | });
44 |
--------------------------------------------------------------------------------
/packages/express/src/example/liveview/ios/cat.ts:
--------------------------------------------------------------------------------
1 | import { createLiveView, html } from "liveviewjs";
2 | import { favorites, scores } from "./data";
3 |
4 | type CatCtx = {
5 | cat: string;
6 | fav: boolean;
7 | score: number;
8 | };
9 |
10 | type CatEvent =
11 | | {
12 | type: "change-score";
13 | value: number;
14 | }
15 | | {
16 | type: "toggle-favorite";
17 | };
18 |
19 | // LiveView Native Tutorial -
20 | // https://liveviewnative.github.io/liveview-client-swiftui/tutorials/phoenixliveviewnative/01-initial-list/
21 | export const catLive = createLiveViewQuery String ID: ${id}
35 | 36 | 37 |
23 |
36 | `;
37 | },
38 | });
39 |
--------------------------------------------------------------------------------
/packages/gen/_templates/deno-project/new/src/server/liveview/router.ts.ejs.t:
--------------------------------------------------------------------------------
1 | ---
2 | to: <%= h.changeCase.lower(name) %>/src/server/liveview/router.ts
3 | ---
4 | import { LiveViewRouter } from "liveviewjs";
5 | import { helloLive } from "./hello.ts";
6 |
7 | // configure LiveView routes for <%= h.inflection.camelize(name, false) %>
8 | export const liveRouter: LiveViewRouter = {
9 | "/hello": helloLive,
10 | "/hello/:name": helloLive,
11 | };
12 |
--------------------------------------------------------------------------------
/packages/gen/_templates/deno-project/new/src/server/oak.ts.ejs.t:
--------------------------------------------------------------------------------
1 | ---
2 | to: <%= h.changeCase.lower(name) %>/src/server/oak.ts
3 | ---
4 | import { Context, LiveViewRouter, send } from "../deps.ts";
5 |
6 | export function logRequests(
7 | liveRouter: LiveViewRouter
8 | ): (ctx: Context
24 |
29 | ${hello} ${name}
25 | 28 |
30 | More documentation and examples at
31 | LiveViewJS.com
34 |
35 |
23 |
36 | `;
37 | },
38 | });
39 |
--------------------------------------------------------------------------------
/packages/gen/_templates/node-project/new/src/server/liveview/router.ts.ejs.t:
--------------------------------------------------------------------------------
1 | ---
2 | to: <%= h.changeCase.lower(name) %>/src/server/liveview/router.ts
3 | ---
4 | import { LiveViewRouter } from "liveviewjs";
5 | import { helloLive } from "./hello";
6 |
7 | // configure LiveView routes for <%= h.inflection.camelize(name, false) %>
8 | export const liveRouter: LiveViewRouter = {
9 | "/hello": helloLive,
10 | "/hello/:name": helloLive,
11 | };
12 |
--------------------------------------------------------------------------------
/packages/gen/_templates/node-project/new/tsconfig-client.json.ejs.t:
--------------------------------------------------------------------------------
1 | ---
2 | to: <%= h.changeCase.lower(name) %>/tsconfig-client.json
3 | ---
4 | {
5 | "compilerOptions": {
6 | "module": "commonjs",
7 | "esModuleInterop": true,
8 | "noEmitOnError": true,
9 | "noFallthroughCasesInSwitch": true,
10 | "experimentalDecorators": true,
11 | "emitDecoratorMetadata": true,
12 | "strictPropertyInitialization": false,
13 | "declaration": true,
14 | "resolveJsonModule": true,
15 | "strict": true,
16 | "skipLibCheck": true,
17 | "target": "ES2020",
18 | "moduleResolution": "node",
19 | "lib": ["DOM"],
20 | "types": ["node"],
21 | "outDir": "./build",
22 | "baseUrl": "."
23 | },
24 | "include": ["./src/client/*"],
25 | "exclude": ["build", "node_modules", "./**/*.test.ts"]
26 | }
27 |
--------------------------------------------------------------------------------
/packages/gen/_templates/node-project/new/tsconfig.json.ejs.t:
--------------------------------------------------------------------------------
1 | ---
2 | to: <%= h.changeCase.lower(name) %>/tsconfig.json
3 | ---
4 | {
5 | "compilerOptions": {
6 | "module": "commonjs",
7 | "esModuleInterop": true,
8 | "noEmitOnError": true,
9 | "noFallthroughCasesInSwitch": true,
10 | "experimentalDecorators": true,
11 | "emitDecoratorMetadata": true,
12 | "strictPropertyInitialization": false,
13 | "declaration": true,
14 | "resolveJsonModule": true,
15 | "strict": true,
16 | "skipLibCheck": true,
17 | "target": "es2019",
18 | "moduleResolution": "node",
19 | "lib": ["es2019", "esnext.asynciterable"],
20 | "types": ["node"],
21 | "outDir": "./build",
22 | "baseUrl": "."
23 | },
24 | "include": ["./src/**/*"],
25 | "exclude": ["build", "node_modules", "./**/*.test.ts", "./src/client/**/*"]
26 | }
27 |
--------------------------------------------------------------------------------
/packages/gen/dist/cli.d.mts:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | export {};
3 |
--------------------------------------------------------------------------------
/packages/gen/dist/null_logger.d.mts:
--------------------------------------------------------------------------------
1 | import { Logger } from "hygen";
2 | export declare class NullLogger extends Logger {
3 | constructor();
4 | }
5 |
--------------------------------------------------------------------------------
/packages/gen/dist/null_logger.mjs:
--------------------------------------------------------------------------------
1 | import { Logger } from "hygen";
2 | // logger that ignores all messages
3 | export class NullLogger extends Logger {
4 | constructor() {
5 | super(() => { });
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/gen/dist/post_exec.d.mts:
--------------------------------------------------------------------------------
1 | import { GeneratorType } from "./prompts.mjs";
2 | export declare function changeDirMsg(type: GeneratorType, name: string): string | undefined;
3 | export declare function installMsg(type: GeneratorType, install: boolean): "Run `npm install` to install node dependencies." | "Run `npm install` to install node dependencies for client-side javascript." | undefined;
4 | export declare function runMsg(type: GeneratorType): "Run `npm run dev` to start your LiveViewJS project.\"" | "Run `deno run --allow-run --allow-read --allow-write --allow-net --allow-env src/server/autorun.ts` to start your LiveViewJS project.\"" | undefined;
5 |
--------------------------------------------------------------------------------
/packages/gen/dist/post_exec.mjs:
--------------------------------------------------------------------------------
1 | export function changeDirMsg(type, name) {
2 | switch (type) {
3 | case "node-project":
4 | case "deno-project":
5 | return `cd ${name.toLowerCase()}`;
6 | default:
7 | return undefined;
8 | }
9 | }
10 | export function installMsg(type, install) {
11 | switch (type) {
12 | case "node-project":
13 | return install ? undefined : "Run `npm install` to install node dependencies.";
14 | case "deno-project":
15 | return install ? undefined : "Run `npm install` to install node dependencies for client-side javascript.";
16 | default:
17 | return undefined;
18 | }
19 | }
20 | export function runMsg(type) {
21 | switch (type) {
22 | case "node-project":
23 | return 'Run `npm run dev` to start your LiveViewJS project."';
24 | case "deno-project":
25 | return 'Run `deno run --allow-run --allow-read --allow-write --allow-net --allow-env src/server/autorun.ts` to start your LiveViewJS project."';
26 | default:
27 | return undefined;
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/packages/gen/dist/project_helper.d.mts:
--------------------------------------------------------------------------------
1 | export type CreateAppArgs = {
2 | projectType: "node-project" | "deno-project";
3 | projectDir?: string;
4 | install?: boolean;
5 | quiet?: boolean;
6 | };
7 | declare function createApp({ projectType, projectDir, install, quiet }: CreateAppArgs): Promise
24 |
29 | ${hello} ${name}
25 | 28 |
30 | More documentation and examples at
31 | LiveViewJS.com
34 |
35 |