shimmer 0.0.1 → 0.0.7

data/lib/shimmer/utils/remote_navigation.rb

@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+module Shimmer
+  module RemoteNavigation
+    extend ActiveSupport::Concern
+
+    included do
+      def ui
+        @ui ||= RemoteNavigator.new(self)
+      end
+
+      def default_render
+        return render_modal if shimmer_request?
+        return super unless ui.updates?
+
+        render turbo_stream: ui.queued_updates.join("\n")
+      end
+
+      helper_method :modal_path
+      def modal_path(url, id: nil, size: nil, close: true)
+        "javascript:ui.modal.open(#{{url: url, id: id, size: size, close: close}.to_json})"
+      end
+
+      helper_method :close_modal_path
+      def close_modal_path(id: nil)
+        "javascript:ui.modal.close(#{{id: id}.to_json})"
+      end
+
+      helper_method :popover_path
+      def popover_path(url, id: nil, selector: nil, placement: nil)
+        "javascript:ui.popover.open(#{{url: url, id: id, selector: selector, placement: placement}.compact.to_json})"
+      end
+
+      def shimmer_request?
+        request.headers["X-Shimmer"].present?
+      end
+
+      def render_modal
+        enforce_modal
+        render layout: false
+      end
+
+      def enforce_modal
+        raise "trying to render a modal from a regular request" unless shimmer_request?
+      end
+    end
+  end
+
+  class RemoteNavigator
+    delegate :polymorphic_path, to: :@controller
+
+    def initialize(controller)
+      @controller = controller
+    end
+
+    def queued_updates
+      @queued_updates ||= []
+    end
+
+    def updates?
+      queued_updates.any?
+    end
+
+    def run_javascript(script)
+      queued_updates.push turbo_stream.append "shimmer", "<div class='hidden' data-controller='remote-navigation'>#{script}</div>"
+    end
+
+    def replace(id, with: id, **locals)
+      queued_updates.push turbo_stream.replace(id, partial: with, locals: locals)
+    end
+
+    def prepend(id, with:, **locals)
+      queued_updates.push turbo_stream.prepend(id, partial: with, locals: locals)
+    end
+
+    def append(id, with:, **locals)
+      queued_updates.push turbo_stream.append(id, partial: with, locals: locals)
+    end
+
+    def remove(id)
+      queued_updates.push turbo_stream.remove(id)
+    end
+
+    def open_modal(path, id: nil, size: nil, close: true)
+      run_javascript "ui.modal.open(#{{url: url, id: id, size: size, close: close}.to_json})"
+    end
+
+    def close_modal
+      run_javascript "ui.modal.close()"
+    end
+
+    def open_popover(path, selector:, placement: nil)
+      run_javascript "ui.popover.open(#{{url: url, selector: selector, placement: placement}.to_json})"
+    end
+
+    def close_popover
+      run_javascript "ui.popover.close()"
+    end
+
+    def navigate_to(path)
+      close_modal
+      path = polymorphic_path(path) unless path.is_a?(String)
+      run_javascript "Turbo.visit('#{path}')"
+    end
+
+    private
+
+    def turbo_stream
+      @controller.send(:turbo_stream)
+    end
+  end
+end

data/lib/shimmer/utils/sitemap_adapter.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Shimmer
+  class SitemapAdapter
+    def write(location, raw_data)
+      SitemapGenerator::FileAdapter.new.write(location, raw_data)
+      ActiveStorage::Blob.service.upload("sitemaps/#{location.path_in_public}", File.open(location.path))
+    end
+  end
+end

data/lib/shimmer/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Shimmer
-  VERSION = "0.0.1"
+  VERSION = "0.0.7"
 end

data/lib/shimmer.rb

@@ -1,6 +1,11 @@
 # frozen_string_literal: true
 
 require_relative "shimmer/version"
+require_relative "shimmer/railtie" if defined?(Rails::Railtie)
+Dir["#{File.expand_path("../lib/shimmer/middlewares", __dir__)}/*"].each { |e| require e }
+Dir["#{File.expand_path("../lib/shimmer/controllers", __dir__)}/*"].each { |e| require e }
+Dir["#{File.expand_path("../lib/shimmer/jobs", __dir__)}/*"].each { |e| require e }
+Dir["#{File.expand_path("../lib/shimmer/utils", __dir__)}/*"].each { |e| require e }
 
 module Shimmer
   class Error < StandardError; end

data/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@nerdgeschoss/shimmer",
+  "version": "4.0.0",
+  "description": "Simple application development in Rails",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn build:js && yarn build:types",
+    "build:js": "NODE_ENV=production rollup -c",
+    "build:types": "tsc --emitDeclarationOnly",
+    "format": "prettier --write \"src/**/*.{ts,css,scss,json,yml}\"",
+    "lint": "yarn lint:types && yarn lint:style",
+    "lint:types": "tsc --noEmit",
+    "lint:style": "eslint src/**/*.ts --max-warnings 0"
+  },
+  "contributors": [
+    "Jens Ravens"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@hotwired/stimulus": "^3.0.1",
+    "@popperjs/core": "^2.11.0",
+    "@rails/request.js": "^0.0.6"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.6.0",
+    "@typescript-eslint/parser": "^5.6.0",
+    "esbuild": "^0.14.2",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "prettier": "^2.5.1",
+    "rollup": "^2.61.0",
+    "rollup-plugin-cleaner": "^1.0.0",
+    "rollup-plugin-esbuild": "^4.7.2",
+    "typescript": "^4.1.3"
+  },
+  "keywords": [
+    "rails",
+    "form",
+    "modal"
+  ],
+  "bugs": {
+    "url": "https://github.com/nerdgeschoss/shimmer/issues"
+  },
+  "homepage": "https://github.com/nerdgeschoss/shimmer#readme"
+}

data/rollup.config.js

@@ -0,0 +1,26 @@
+import esbuild from "rollup-plugin-esbuild";
+import cleaner from "rollup-plugin-cleaner";
+import pkg from "./package.json";
+
+export default {
+  input: "./src/index.ts",
+  external: ["@rails/request.js", "@hotwired/stimulus", "@popperjs/core"],
+  plugins: [
+    cleaner({
+      targets: ["./dist/"],
+    }),
+    esbuild({
+      target: "es6",
+    }),
+  ],
+  output: [
+    {
+      file: pkg.main,
+      format: "cjs",
+    },
+    {
+      file: pkg.module,
+      format: "es",
+    },
+  ],
+};

data/src/controllers/remote-navigation.ts

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect(): void {
+    const script = (this.element as HTMLDivElement).innerText;
+    (0, eval)(script);
+    this.element.remove();
+  }
+}

data/src/index.ts

@@ -0,0 +1,32 @@
+import type { Application } from "@hotwired/stimulus";
+import { ModalPresenter } from "./modal";
+import { PopoverPresenter } from "./popover";
+import RemoteNavigationController from "./controllers/remote-navigation";
+import "./touch";
+
+export { registerServiceWorker } from "./serviceworker";
+export { currentLocale } from "./locale";
+
+declare global {
+  interface Window {
+    ui?: {
+      modal: ModalPresenter;
+      popover: PopoverPresenter;
+    };
+  }
+}
+
+export async function start({
+  application,
+}: {
+  application: Application;
+}): Promise<void> {
+  const root = document.createElement("div");
+  root.id = "shimmer";
+  document.body.append(root);
+  application.register("remote-navigation", RemoteNavigationController);
+  window.ui = {
+    modal: new ModalPresenter(),
+    popover: new PopoverPresenter(),
+  };
+}

data/src/locale.ts

@@ -0,0 +1,3 @@
+export function currentLocale(): string {
+  return (document.documentElement.lang || "en") as string;
+}

data/src/modal.ts

@@ -0,0 +1,73 @@
+import { loaded, createElement, nextFrame, getHTML } from "./util";
+
+export interface ModalOptions {
+  id?: string;
+  url: string;
+  size?: string;
+  close?: boolean;
+}
+
+export class ModalPresenter {
+  private modals: Record<string, Modal> = {};
+
+  constructor() {
+    loaded.then(this.prepareBlind);
+  }
+
+  async open(options: ModalOptions): Promise<void> {
+    const id = (options.id = options.id ?? "default-modal");
+    (this.modals[id] = new Modal({ presenter: this, id })).open(options);
+    this.updateBlindStatus();
+  }
+
+  async close({ id }: { id?: string } = {}): Promise<void> {
+    let promise: Promise<unknown> | null = null;
+    if (id) {
+      promise = this.modals[id]?.close();
+      delete this.modals[id];
+    } else {
+      promise = Promise.all(Object.values(this.modals).map((e) => e.close()));
+      this.modals = {};
+    }
+    this.updateBlindStatus();
+    await promise;
+  }
+
+  private updateBlindStatus(): void {
+    const open = Object.keys(this.modals).length > 0;
+    document.body.classList.toggle("modal-open", open);
+  }
+
+  private async prepareBlind(): Promise<void> {
+    createElement(document.body, "modal-blind");
+  }
+}
+
+export class Modal {
+  private readonly root: HTMLDivElement;
+  private readonly frame: HTMLDivElement;
+  private readonly closeButton: HTMLDivElement;
+
+  constructor({ presenter, id }: { presenter: ModalPresenter; id: string }) {
+    this.root = createElement(document.body, "modal");
+    const content = createElement(this.root, "modal__content");
+    this.closeButton = createElement(content, "modal__close");
+    this.closeButton.addEventListener("click", () => {
+      presenter.close({ id });
+    });
+    this.frame = createElement(content, "modal__frame");
+  }
+
+  async open({ size, url, close }: ModalOptions): Promise<void> {
+    await nextFrame();
+    this.closeButton.style.display = close ?? true ? "block" : "none";
+    this.root.classList.add("modal--open");
+    this.root.classList.add("modal--loading");
+    this.root.classList.toggle("modal--small", size === "small");
+    this.frame.innerHTML = await getHTML(url);
+  }
+
+  async close(): Promise<void> {
+    this.root.classList.remove("modal--open");
+  }
+}

data/src/popover.ts

@@ -0,0 +1,89 @@
+import { Instance as Popper, createPopper, Placement } from "@popperjs/core";
+import { createElement, getHTML } from "./util";
+
+export interface PopoverOptions {
+  id?: string;
+  url: string;
+  selector?: HTMLElement | string;
+  placement?: Placement;
+}
+
+export class PopoverPresenter {
+  private popovers: Record<string, Popover> = {};
+  private lastClickedElement?: HTMLElement;
+
+  constructor() {
+    document.addEventListener("click", this.trackElement);
+  }
+
+  async open(options: PopoverOptions): Promise<void> {
+    const id = (options.id = options.id ?? "default-popover");
+    options.selector = options.selector ?? this.lastClickedElement;
+    (this.popovers[id] = new Popover()).open(options);
+  }
+
+  async close({ id }: { id?: string } = {}): Promise<void> {
+    let promise: Promise<unknown> | null = null;
+    if (id) {
+      promise = this.popovers[id]?.close();
+      delete this.popovers[id];
+    } else {
+      promise = Promise.all(Object.values(this.popovers).map((e) => e.close()));
+      this.popovers = {};
+    }
+    await promise;
+  }
+
+  private trackElement = (event: MouseEvent): void => {
+    this.lastClickedElement = event.target as HTMLElement;
+  };
+}
+
+export class Popover {
+  private popper?: Popper;
+  private popoverDiv?: HTMLDivElement;
+
+  async open({ url, selector, placement }: PopoverOptions): Promise<void> {
+    const root =
+      typeof selector === "string"
+        ? document.querySelector(selector)
+        : selector;
+    if (!root) {
+      return;
+    }
+    const popoverDiv = createElement(document.body, "popover");
+    const arrow = createElement(popoverDiv, "popover__arrow");
+    arrow.setAttribute("data-popper-arrow", "true");
+    const content = createElement(popoverDiv, "popover__content");
+    content.innerHTML = await getHTML(url);
+    this.popper = createPopper(root, popoverDiv, {
+      placement: placement ?? "auto",
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 8],
+          },
+        },
+      ],
+    });
+    this.popoverDiv = popoverDiv;
+    document.addEventListener("click", this.clickOutside);
+  }
+
+  async close(): Promise<void> {
+    this.popper?.destroy();
+    this.popper = undefined;
+    document.removeEventListener("click", this.clickOutside);
+    this.popoverDiv?.remove();
+    this.popoverDiv = undefined;
+  }
+
+  private clickOutside = (event: MouseEvent): void => {
+    if (this.popoverDiv?.contains(event.target as HTMLElement)) {
+      return;
+    }
+    event.preventDefault();
+    this.close();
+  };
+}

data/src/serviceworker.ts

@@ -0,0 +1,7 @@
+export async function registerServiceWorker(): Promise<void> {
+  if (navigator.serviceWorker) {
+    await navigator.serviceWorker.register("/serviceworker.js", {
+      scope: "./",
+    });
+  }
+}

data/src/touch.ts

@@ -0,0 +1,20 @@
+document.addEventListener("turbo:load", () => {
+  if (window.ontouchstart !== undefined) {
+    document.body.classList.add("touch");
+  } else {
+    document.body.classList.add("no-touch");
+  }
+});
+
+document.addEventListener("focusin", (event) => {
+  const input = event.target as HTMLElement;
+  if (input.tagName === "INPUT" || input.tagName === "TEXTAREA") {
+    document.body.classList.add("keyboard-visible");
+  }
+});
+
+document.addEventListener("focusout", () => {
+  document.body.classList.remove("keyboard-visible");
+});
+
+export {};

data/src/util.ts

@@ -0,0 +1,31 @@
+import { get } from "@rails/request.js";
+
+export async function getHTML(url: string): Promise<string> {
+  const response = await get(url, { headers: { "X-Shimmer": "true" } });
+  if (response.ok) {
+    return await response.response.text();
+  }
+  return "";
+}
+
+export const loaded: Promise<void> = new Promise((res) => {
+  document.addEventListener("DOMContentLoaded", () => {
+    res();
+  });
+});
+
+export async function nextFrame(): Promise<void> {
+  return new Promise((res) => {
+    setTimeout(res, 10);
+  });
+}
+
+export function createElement(
+  parent: HTMLElement,
+  className: string
+): HTMLDivElement {
+  const element = document.createElement("div");
+  element.className = className;
+  parent.append(element);
+  return element;
+}

data/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["dom", "esnext"],
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": false,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "target": "es6",
+    "isolatedModules": true,
+    "declaration": true
+  },
+  "exclude": ["node_modules", "dist"],
+  "files": ["src/index.ts"]
+}

data/typings.d.ts

@@ -0,0 +1 @@
+declare module "@rails/request.js";