Skip to content

Instantly share code, notes, and snippets.

View brophdawg11's full-sized avatar

Matt Brophy brophdawg11

View GitHub Profile
@brophdawg11
brophdawg11 / entry.client.tsx
Created December 1, 2022 17:19
Remix without managing the full document (Express Template)
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
function hydrate() {
startTransition(() => {
hydrateRoot(
// 👋 Hydrate into the proper element, not the document!
document.querySelector("#app"),
<StrictMode>
@brophdawg11
brophdawg11 / update-remix.js
Created August 24, 2022 23:50
Node script to update installed Remix packages
#!/usr/bin/env node
// Usage:
// node update-remix.js [version]
const { join } = require("path");
const { execSync } = require("child_process");
const [, , version] = process.argv;
if (!version) {
@brophdawg11
brophdawg11 / App.jsx
Created July 29, 2022 14:03
React Router 6.4.0 Code Splitting Example
// Assume you want to do this in your routes, which are in the critical path JS bundle
<Route path="lazy" loader={lazyLoader} element={<Lazy />} />
// And assume you have two files containing your actual load and component:
// lazy-loader.ts -> exports the loader
// lazy-component.ts -> exports the component
// We'll render the component via React.lazy()
let LazyActual = React.lazy(() => import("./lazy-component"));
@brophdawg11
brophdawg11 / logger.js
Created September 21, 2018 15:01
Dead Simple LogLevel-driven Logging
const logLevel = process.env.LOG_LEVEL;
const noop = () => {};
export default {
debug:
logLevel === 'debug' ?
console.debug.bind(console) :
noop,
info:
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()
// Class attributes with newlines in the for formatting end up rendering
// trailing `\n` characters which causes the classname not to apply.
// I.e., `long-classname-2 long-classname-3\n long-classname-4`
// So .long-classname-3 styles to not apply
const app = new Vue({
template:
`<div>
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()
// Would expect this to render the v-show="true" div without any style attribute
// Instead, it renders with style="display:;"
const app = new Vue({
template: '<div>\n' +
' <p>v-show=true</p>\n' +
' <p v-show="true">v-show=true</p>\n' +
' <p v-show="false">v-show=false</p>' +
@brophdawg11
brophdawg11 / hapi-npmv4-issue.txt
Created December 21, 2016 21:38
npm 4.1.1 Nested dependency resolution issue with hapi@15.2.0
~/working> mkdir hapi-npmv4-issue
~/working> cd hapi-npmv4-issue/
~/working/hapi-npmv4-issue> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.