mirrors/bonfire-app
1
0
Fork 0
mirror of https://github.com/bonfire-networks/bonfire-app.git synced 2024-05-10 13:12:40 +00:00
Code Issues Projects Releases Wiki Activity

Switch from pnpm & esbuild & postcss-cli to yarn & parcel

Browse source
This commit is contained in:
Mayel de Borniol 2022-05-24 11:07:06 +12:00
parent 5ef58a82eb
commit 2b4c9c85d9
17 changed files with 108 additions and 2550 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -71,6 +71,7 @@ deploy
.pnpm-debug.log
.pnpm-store
.pnpm-state.json
assets/.parcel-cache
priv/localisation/*
.tailwindcss/touch/
.local/state/

4
Dockerfile.dev
View file

@ -30,7 +30,7 @@ RUN apk update && \
# various dependencies of dependencies
RUN apk add file \
npm \
yarn \
git \
mailcap \
ca-certificates openssh-client openssl-dev \
@ -53,7 +53,7 @@ RUN apk add imagemagick vips-tools
COPY --from=messctl_build $FORKS/messctl/target/release/messctl /bin/
# JS package manager & builders
RUN npm install -g pnpm esbuild postcss
# RUN npm install -g pnpm esbuild postcss
EXPOSE 4000/tcp
EXPOSE 4004/tcp

8
Dockerfile.release
View file

@ -31,7 +31,7 @@ ENV HOME=/opt/app/ TERM=xterm MIX_ENV=prod APP_NAME=$APP_NAME FLAVOUR=$FLAVOUR F
WORKDIR $HOME
# necessary utils
RUN apk add --no-cache tar curl git rust cargo npm bash
RUN apk add --no-cache tar curl git rust cargo yarn bash
# dependencies for comeonin
RUN apk add --no-cache make gcc libc-dev
@ -75,9 +75,11 @@ RUN rm ./config/deps.path
RUN MIX_ENV=prod mix do deps.compile
# JS package manager
RUN npm install -g pnpm
# RUN npm install -g pnpm
# install JS deps
COPY assets/package.json assets/pnpm-lock.yaml assets/*.sh ./assets/
COPY assets/package.json assets/*.sh ./assets/
# COPY assets/pnpm-lock.yaml ./assets/
COPY assets/yarn.lock ./assets/
COPY priv/*.sh ./priv/
RUN chmod +x assets/*.sh && sh assets/install.sh
RUN chmod +x config/*.sh && chmod +x priv/*.sh && sh config/deps.js.sh

6
assets/.postcssrc Normal file
View file

@ -0,0 +1,6 @@
{
"plugins": {
"tailwindcss": true,
"postcss-import": true,
}
}

9
assets/css/app.scss Executable file → Normal file
View file

@ -1,15 +1,14 @@
/* This file is for your main application css. */
@import "../node_modules/nprogress/nprogress.css";
@import "../node_modules/@yaireo/tagify/dist/tagify.css";
// @import "../node_modules/@yaireo/tagify/dist/tagify.css";
@tailwind base;
@tailwind base;
.h-90vh {
height: 90vh;
}
[x-cloak] {
display: none !important;
}
@ -552,4 +551,8 @@ emoji-picker {
.messages_smart_input .ql-container {
height: 50px;
}
.hide {
display: none !important;
}

5
assets/install.sh
View file

@ -4,4 +4,7 @@ SCRIPT_DIR=`dirname "$0"`
DIR="${1:-$SCRIPT_DIR}"
printf "Install the app's main JS deps from $DIR... "
cd $DIR && pnpm install
yarn -v || npm -g install yarn
cd $DIR && yarn

3
assets/js/bonfire_basic.js
View file

@ -1 +1,2 @@
import "./common"
import "./common"
import * as css from "../css/app.scss"

3
assets/js/bonfire_live.js
View file

@ -39,3 +39,6 @@ window.liveSocket = liveSocket
import { ExtensionHooks } from "../../data/current_flavour/config/deps_hooks.js"
// Add Extensions' Hooks...
Object.assign(liveSocket.hooks, ExtensionHooks);
import * as tagifycss from "../node_modules/@yaireo/tagify/dist/tagify.css";
import * as css from "../css/app.scss"

33
assets/package.json
View file

@ -1,15 +1,18 @@
{
"version": "0.0.0",
"scripts": {
"preinstall": "npx only-allow pnpm",
"preinstall": "npx only-allow yarn",
"watch.assets": "cpx 'static/**/*' ../priv/static --watch",
"build": "mkdir -p ../priv/static/ && cp -r static/*.ico ../priv/static/ && cp -r static/images ../priv/static/ && pnpm build.css && pnpm build.js",
"watch.js": "esbuild ./js/bonfire_live.js ./js/bonfire_basic.js --target=es2017 --bundle --sourcemap --loader:.svg=text --outdir=../priv/static/js --watch",
"build.js": "esbuild ./js/bonfire_live.js ./js/bonfire_basic.js --target=es2017 --bundle --sourcemap --loader:.svg=text --bundle --outdir=../priv/static/js",
"watch.css.tw": "TAILWIND_MODE=build NODE_ENV=production npx tailwindcss -i ./css/app.scss -o ../priv/static/css/bonfire.css --files ../{lib,forks,deps}/**/*{.leex,.heex,.sface} --jit --watch",
"build.css.tw": "TAILWIND_MODE=build NODE_ENV=production npx tailwindcss -i ./css/app.scss -o ../priv/static/css/bonfire.css --jit --minify",
"watch.css": "TAILWIND_MODE=watch NODE_ENV=development postcss ./css/app.scss -o ../priv/static/css/bonfire.css -w",
"build.css": "TAILWIND_MODE=build NODE_ENV=production postcss ./css/app.scss -o ../priv/static/css/bonfire.css"
"prepare.static": "mkdir -p ../priv/static/ && cp -r static/*.ico ../priv/static/ && cp -r static/images ../priv/static/",
"build.postcss.esbuild": "yarn prepare.static && yarn build.postcss && yarn build.esbuild",
"watch.esbuild": "esbuild ./js/bonfire_live.js ./js/bonfire_basic.js --target=es2017 --bundle --sourcemap --loader:.svg=text --outdir=../priv/static/js --watch",
"build.esbuild": "esbuild ./js/bonfire_live.js ./js/bonfire_basic.js --target=es2017 --bundle --sourcemap --loader:.svg=text --bundle --outdir=../priv/static/js",
"watch.tailwindcss": "TAILWIND_MODE=build NODE_ENV=production npx tailwindcss -i ./css/app.scss -o ../priv/static/css/bonfire.css --files ../{lib,forks,deps}/**/*{.leex,.heex,.sface} --jit --watch",
"build.tailwindcss": "TAILWIND_MODE=build NODE_ENV=production npx tailwindcss -i ./css/app.scss -o ../priv/static/css/bonfire.css --jit --minify",
"watch.postcss": "TAILWIND_MODE=watch NODE_ENV=development postcss ./css/app.scss -o ../priv/static/css/bonfire.css -w",
"build.postcss": "TAILWIND_MODE=build NODE_ENV=production postcss ./css/app.scss -o ../priv/static/css/bonfire.css",
"watch": "parcel watch 'js/bonfire_*.js' --dist-dir ../priv/static/assets",
"build": "parcel build 'js/bonfire_*.js' --dist-dir ../priv/static/assets"
},
"dependencies": {
"@alpinejs/collapse": "^3.10.2",
@ -28,17 +31,23 @@
"phoenix_live_view": "link:../deps/phoenix_live_view"
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"@parcel/transformer-sass": "2.5.0",
"buffer": "^6.0.3",
"chromedriver": "^101.0.0",
"cpx": "^1.5.0",
"esbuild": "^0.14.39",
"only-allow": "^1.1.0",
"pnpm": "^7.1.3",
"parcel": "^2.5.0",
"postcss": "^8.4.14",
"postcss-cli": "^9.1.0",
"postcss-import": "^14.1.0",
"prop-types": "^15.8.1",
"tailwindcss": "~3.0.24",
"tailwindcss-debug-screens": "^2.2.1"
},
"disabledDependencies": {
"autoprefixer": "^10.4.7",
"esbuild": "^0.14.39",
"only-allow": "^1.1.0",
"pnpm": "^7.1.3",
"postcss-cli": "^9.1.0"
}
}

2500
assets/pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

3
assets/postcss.config.js
View file

@ -1,6 +1,7 @@
// NOTE: parcel uses .postcssrc instead
module.exports = {
plugins: {
'postcss-import': {},
'postcss-import': {},
'tailwindcss': {},
autoprefixer: {},
},

7
docs/HACKING.md
View file

@ -62,6 +62,7 @@ So for example if you want to run the `classic` flavour, run:
- Dependencies:
- Recent versions of [Elixir](https://elixir-lang.org/install.html) (1.13+) and OTP/erlang (24+)
- [yarn](https://yarnpkg.com)
- Recent versions of Docker & [docker-compose](https://docs.docker.com/compose/install/)
- Set an environment variable to indicate your choice: `export WITH_DOCKER=easy`
@ -73,7 +74,7 @@ So for example if you want to run the `classic` flavour, run:
- Dependencies:
- Recent versions of [Elixir](https://elixir-lang.org/install.html) (1.13+) and OTP/erlang (24+)
- Recent versions of [Rust](https://www.rust-lang.org/tools/install) and Cargo
- [pnpm](https://pnpm.io)
- [yarn](https://yarnpkg.com)
- Recent versions of Docker & [docker-compose](https://docs.docker.com/compose/install/)
- Set an environment variable to indicate your choice: `export WITH_DOCKER=partial`
@ -85,7 +86,7 @@ So for example if you want to run the `classic` flavour, run:
- Dependencies:
- Recent versions of [Elixir](https://elixir-lang.org/install.html) (1.13+) and OTP/erlang (24+)
- Recent versions of [Rust](https://www.rust-lang.org/tools/install) and Cargo
- [pnpm](https://pnpm.io)
- [yarn](https://yarnpkg.com)
- Postgres 12+ (or rather [Postgis](https://postgis.net/install/) if using the bonfire_geolocate extension)
- [Meili Search](https://docs.meilisearch.com/learn/getting_started/installation.html) (optional)
@ -111,7 +112,7 @@ You will need to create and init the db directory (keeping all your Postgres dat
- create the db `createdb bonfire_dev`
- start the postgres instance `pg_ctl -l "$PGDATA/server.log" start`
- `mix deps.get` to get elixir dependencies
- `pushd assets && pnpm install && popd` to get the frontend dependencies
- `pushd assets && yarn && popd` to get the frontend dependencies
- `mix ecto.migrate` to compile & get an up to date database
- `iex -S mix phx.server` to start the server
- check out the app on `localhost:4000` in your browser

24
flavours/classic/config/dev.exs
View file

@ -25,18 +25,22 @@ config :bonfire, Bonfire.Web.Endpoint,
check_origin: false,
code_reloader: true,
watchers: [
pnpm: [
"watch.js",
yarn: [
"watch",
cd: Path.expand("assets", File.cwd!())
],
pnpm: [
"watch.css",
cd: Path.expand("assets", File.cwd!())
],
pnpm: [
"watch.assets",
cd: Path.expand("assets", File.cwd!())
]
# pnpm: [
# "watch.js",
# cd: Path.expand("assets", File.cwd!())
# ],
# pnpm: [
# "watch.css",
# cd: Path.expand("assets", File.cwd!())
# ],
# pnpm: [
# "watch.assets",
# cd: Path.expand("assets", File.cwd!())
# ]
],
live_reload: [
patterns: [

2
justfile
View file

@ -157,6 +157,7 @@ update-app: update-repo update-deps
# Update Bonfire extensions in ./deps
update-deps:
@rm -rf deps/*/assets/pnpm-lock.yaml
@rm -rf deps/*/assets/yarn.lock
just mix-remote updates
update-repo:
@ -205,7 +206,6 @@ deps-clean-api:
js-deps-get: js-assets-deps-get js-ext-deps-get
js-assets-deps-get:
@pnpm -v || npm -g install pnpm
@chmod +x ./assets/install.sh
just cmd ./assets/install.sh

42
lib/web/endpoint_template.ex
View file

@ -46,7 +46,7 @@ quote do
at: "/",
from: :bonfire,
gzip: true,
only: ~w(css fonts images js favicon.ico robots.txt cache_manifest.json favicon.ico source.tar.gz)
only: ~w(assets css fonts images js favicon.ico robots.txt cache_manifest.json favicon.ico source.tar.gz)
plug Plug.Static,
at: "/data/uploads/",
@ -96,18 +96,42 @@ quote do
plug Bonfire.Web.Router
def include_assets(conn) do
include_assets(conn, :top)
include_assets(conn, :bottom)
end
def include_assets(conn, :top) do
# unused?
# <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
# <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
# imported into main CSS already
# <link href="https://unpkg.com/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
# TODO: serve fonts directly
"""
<link phx-track-static rel='stylesheet' href='#{static_path("/assets/bonfire_basic.css")}'/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700;900&display=swap" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
"""
end
def include_assets(conn, :bottom) do
js = if Utils.e(conn, :assigns, :current_account, nil) || Utils.e(conn, :assigns, :current_user, nil) do
static_path("/js/bonfire_live.js")
static_path("/assets/bonfire_live.js")
else
static_path("/js/bonfire_basic.js")
static_path("/assets/bonfire_basic.js")
end
# if Config.get!(:env) == :dev do
# "<link phx-track-static rel='stylesheet' href='"<> static_path("/css/bonfire.css") <>"'/> <script defer phx-track-static crossorigin='anonymous' src='"<> js <>"'></script>"
# else
(PhoenixGon.View.render_gon_script(conn) |> Phoenix.HTML.safe_to_string) <>
"<link phx-track-static rel='stylesheet' href='"<> static_path("/css/bonfire.css") <>"'/> <script defer phx-track-static crossorigin='anonymous' src='"<> js <>"'></script> "
# end
(PhoenixGon.View.render_gon_script(conn) |> Phoenix.HTML.safe_to_string) <>
"""
<script defer phx-track-static crossorigin='anonymous' src='#{js}'></script>
"""
end
end

4
mix.exs
View file

@ -98,7 +98,7 @@ defmodule Bonfire.MixProject do
"hex.setup": ["local.hex --force"],
"rebar.setup": ["local.rebar --force"],
"assets.build": [
"cmd cd ./assets && pnpm build",
"cmd cd ./assets && yarn build",
],
"bonfire.seeds": [
# "phil_columns.seed",
@ -112,7 +112,7 @@ defmodule Bonfire.MixProject do
"run #{flavour_path()}/repo/seeds.exs"
],
"js.deps.get": ["cmd make js.deps.get"],
"js.deps.update": ["cmd cd assets && pnpm update"],
"js.deps.update": ["cmd cd assets && yarn update"],
setup: ["hex.setup", "rebar.setup", "deps.get", "bonfire.deps.clean.data", "ecto.setup"],
updates: ["deps.get", "bonfire.deps"],
upgrade: ["updates", "ecto.migrate"],

4
priv/deps.js.sh
View file

@ -6,12 +6,12 @@ for dep in $DEPS ; do
printf "Install JS deps from extension %s... " "$dep"
if cd "forks/$dep/assets" 2>/dev/null ; then
pnpm install
yarn
cd ../../../
fi
if cd "deps/$dep/assets" 2>/dev/null ; then
pnpm install
yarn
cd ../../../
else
printf "The extension %s is not available\n" "$dep"