V4

.github/workflows/ci.yml

@@ -18,22 +18,6 @@ jobs:
       fail-fast: false
       matrix:
         include:
-          - elixir: 1.10.x
-            otp: 21.3.8.21
-          - elixir: 1.10.x
-            otp: 22.3.4.16
-          - elixir: 1.10.x
-            otp: 23.2.7
-            warnings_as_errors: true
-            static_analysis: false
-          - elixir: 1.11.x
-            otp: 21.3.8.21
-          - elixir: 1.11.x
-            otp: 22.3.4.16
-          - elixir: 1.11.x
-            otp: 23.2.7
-            warnings_as_errors: true
-            static_analysis: false
           - elixir: 1.12.x
             otp: 22.x
           - elixir: 1.12.x

.github/workflows/v3.yml

@@ -0,0 +1,106 @@
+name: Torch v3 CI
+
+on:
+  pull_request:
+    branches: [v3]
+    types: [opened, edited, reopened, synchronize]
+  push:
+    branches: [v3]
+    tags:
+      - v[1-9].[0-9]+.[0-9]+
+
+jobs:
+  mix_test:
+    name: mix test (Elixir ${{matrix.elixir}} | OTP ${{matrix.otp}})
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - elixir: 1.10.x
+            otp: 21.3.8.21
+          - elixir: 1.10.x
+            otp: 22.3.4.16
+          - elixir: 1.10.x
+            otp: 23.2.7
+            warnings_as_errors: true
+            static_analysis: false
+          - elixir: 1.11.x
+            otp: 21.3.8.21
+          - elixir: 1.11.x
+            otp: 22.3.4.16
+          - elixir: 1.11.x
+            otp: 23.2.7
+            warnings_as_errors: true
+            static_analysis: false
+          - elixir: 1.12.x
+            otp: 22.x
+          - elixir: 1.12.x
+            otp: 23.x
+          - elixir: 1.12.x
+            otp: 24.x
+
+    services:
+      db:
+        image: postgres:10.1-alpine
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_DB: example_test
+          POSTGRES_PASSWORD: ""
+        ports: ["5432:5432"]
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+
+    env:
+      MIX_ENV: test
+      DATABASE_POSTGRESQL_USERNAME: postgres
+      PGHOST: postgres
+      PGUSER: postgres
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+          cache: 'npm'
+          cache-dependency-path: assets/package-lock.json
+      - uses: erlef/setup-elixir@v1
+        with:
+          otp-version: ${{matrix.otp}}
+          elixir-version: ${{matrix.elixir}}
+      - name: Get Deps cache
+        uses: actions/cache@v2
+        with:
+          path: deps/
+          key: deps-${{ runner.os }}-${{ matrix.otp }}-${{ matrix.elixir }}-${{ hashFiles('**/mix.lock') }}
+      - name: Get BUILD cache
+        uses: actions/cache@v2
+        with:
+          path: _build/test/
+          key: build-${{ runner.os }}-${{ matrix.otp }}-${{ matrix.elixir }}-${{ hashFiles('**/mix.lock') }}
+      - name: Cache build artifacts
+        uses: actions/cache@v2
+        with:
+          path: |
+            $HOME/.hex
+            $HOME/.mix
+          key: artifacts-${{ runner.os }}-${{ matrix.otp }}-${{ matrix.elixir }}-${{ hashFiles('**/mix.lock') }}
+      - name: Install Deps
+        run: |
+          mix local.hex --force
+          mix local.rebar --force
+          mix deps.get --only test
+      - run: mix compile --warnings-as-errors
+        if: matrix.warnings_as_errors
+      - name: Run tests
+        run: bin/setup
+      - name: coveralls
+        run: mix coveralls.github
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - run: mix dialyzer --halt-exist-status
+        if: matrix.static_analysis

.gitignore

@@ -25,6 +25,7 @@ torch-*.tar
 .elixir_ls/*
 node_modules/
 .DS_Store
+assets/.parcel-cache
 
 .dir-locals.el
 .env
@@ -33,3 +34,7 @@ node_modules/
 /priv/gettext/*/LC_MESSAGES/*.mo
 
 shell.nix
+
+test/support/apps/phx1_3
+test/support/apps/phx1_4
+test/support/apps/phx1_5

README.md

@@ -14,14 +14,14 @@ on the Phoenix HTML generator under the hood.
 
 ![image](https://user-images.githubusercontent.com/7085617/36333572-70e3907e-132c-11e8-9ad2-bd5e98aadc7c.png)
 
-## NOTE
+## Requirements
 
-At the moment, the main release of Torch (version 3.x) only supports Phoenix Framework 1.5 and below.  If you
-need Phoenix 1.6+ support, please use the Torch v4.x release and reference the code in the [v4 branch](https://github.com/mojotech/torch/tree/v4).
+* [Phoenix Framework 1.6+](https://hex.pm/packages/phoenix)
+* [Elixir 1.12+](https://elixir-lang.org/)
 
-When Phoenix 1.6 support is fully stabilized in the [v4 branch](https://github.com/mojotech/torch/tree/v4), Torch 4
-will become the new "default" release, and we will move the current Torch v3 release into a `v3` branch which will be maintained
-for support but no new feature development.  All new feature development will be on Torch v4 going forward.
+## Upgrading
+
+If you are upgrading from Torch v3 (or earlier) you can find additional documentation in the [UPGRADING](UPGRADING.md) file.
 
 ## Installation
 
@@ -32,7 +32,7 @@ To install Torch, perform the following steps:
 ```elixir
 def deps do
   [
-    {:torch, "~> 3.8"}
+    {:torch, "~> 4.0"}
   ]
 end
 ```
@@ -45,7 +45,8 @@ plug(
   at: "/torch",
   from: {:torch, "priv/static"},
   gzip: true,
-  cache_control_for_etags: "public, max-age=86400"
+  cache_control_for_etags: "public, max-age=86400",
+  headers: [{"access-control-allow-origin", "*"}]
 )
 ```
 
@@ -54,7 +55,7 @@ plug(
 ```
 config :torch,
   otp_app: :my_app_name,
-  template_format: "eex" || "slime"
+  template_format: "heex"
 ```
 
 4. Run `mix torch.install`
@@ -67,7 +68,7 @@ Now you're ready to start generating your admin! :tada:
 
 ## Usage
 
-Torch uses Phoenix generators under the hood. Torch injects it's own custom templates
+Torch uses [Phoenix generators](https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Gen.Html.html) under the hood. Torch injects it's own custom templates
 into your `priv/static` directory, then runs the `mix phx.gen.html` task with the options
 you passed in. Finally, it uninstalls the custom templates so they don't interfere with
 running the plain Phoenix generators.
@@ -79,16 +80,28 @@ about the supported options and format.
 For example, if we wanted to generate a blog with a `Post` model we could run the following command:
 
 ```bash
+# mix torch.gen.html <Context Module> <Schema Module> <Schema Table Name> [<Column Name>:<Column Type>]+
 $ mix torch.gen.html Blog Post posts title:string body:text published_at:datetime published:boolean views:integer
 ```
 
 The output would look like:
 
 ```bash
-Add the resource to your browser scope in lib/my_app_web/router.ex:
+* creating priv/templates/phx.gen.html/edit.html.heex
+* creating priv/templates/phx.gen.html/form.html.heex
+...<omitted for brevity>...
+* injecting test/phx1_6/blog_test.exs
+* injecting test/support/fixtures/blog_fixtures.ex
+
+Add the resource to your browser scope in lib/phx1_6_web/router.ex:
 
     resources "/posts", PostController
 
+
+Remember to update your repository by running migrations:
+
+    $ mix ecto.migrate
+
 Ensure the following is added to your endpoint.ex:
 
     plug(
@@ -100,10 +113,15 @@ Ensure the following is added to your endpoint.ex:
       headers: [{"access-control-allow-origin", "*"}]
     )
 
-  :fire: Torch generated html for Posts! :fire:
+Also don't forget to add a link to layouts/torch.html if desired.
+
+    <nav class="torch-nav">
+      <!-- nav links here -->
+    </nav>
+
 ```
 
-Torch also installed an admin layout into your `my_app_web/templates/layout/torch.html.eex`.
+Torch also installed an admin layout into your `my_app_web/templates/layout/torch.html.heex`.
 You will want to update it to include your new navigation link:
 
 ```
@@ -173,21 +191,21 @@ end
 2. Update form filters.
 
 ```eex
-# users/index.html.eex
+# users/index.html.heex
 <div class="field">
   <label>Credential email</label>
   <%= text_input(:credentials, :email, value: maybe(@conn.params, ["credentials", "email"])) %>
 </div>
 ```
 
 Note: You'll need to install & import `Maybe` into your views `{:maybe, "~> 1.0.0"}` for
-the above `eex` to work.
+the above `heex` to work.
 
 ## Styling
 
 Torch generates two CSS themes you can use: `base.css` & `theme.css`.
 The base styles are basically bare bones, and the theme styles look like the screenshot
-above. Just change the stylesheet link in the `torch.html.eex` layout.
+above. Just change the stylesheet link in the `torch.html.heex` layout.
 
 If you want to use the theme, but override the colors, you'll need to include your
 own stylesheet with the specific overrides.
@@ -228,5 +246,24 @@ end
 config :torch,
   otp_app: :my_app_name,
   i18n_backend: MyApp.CustomMessagesBackend
-  template_format: "eex" || "slime"
+  template_format: "heex"
+```
+
+# Development
+
+## Getting Started
+
+Torch currently uses Node 14 to build its assets.
+
+### Building the Torch asset bundles
+
+The JavaScript bundle is output to `priv/static/torch.js`, and the CSS bundles are
+output to `priv/static/base.css` and `priv/static/theme.css`.
+
+To build the bundles navigate to the `assets` folder and run the following commands:
+
+```bash
+$ cd assets
+$ npm i
+$ npm run compile
 ```

UPGRADING.md

@@ -0,0 +1,38 @@
+# Upgrading
+
+### Torch v3 to Torch v4
+
+Torch v4 **IS NOT** fully backwards compatible with Torch v3.  In particular, the templates have changed
+in a manner that affect the generated DOM and CSS rules used.
+
+To manually update your existing templates to the new v4 DOM do the following:
+
+#### show.html.*
+
+* `<div class="header"></div>` becomes `<header class="header"></header>`
+* `<ul><li>...</li></ul>` list for model properties becomes `<section class="torch-show-details"><div class="torch-show-attribute">...</div></section>`
+
+#### form.html.*
+
+Inside `<div class="torch-form-group>...</div>`, the `input` and `error` outputs are now wrapped in an additional div:
+
+    <div class="torch-form-group">
+      <%= label %>
+      <%= input %>
+      <%= error %>
+    </div>
+
+becomes:
+
+    <div class="torch-form-group">
+      <%= label %>
+      <div class="torch-form-group-input">
+        <%= input %>
+        <%= error %>
+      </div>
+    </div>
+
+
+Another option to "upgrade" is to just generate new templates again via the Torch v4 generators.  Run the same
+generator commands as the first time and overwrite your existing files.  Then resolve any customization previously
+made to your Torch v3 templates by re-applying those change to the newly generated Torch v4 templates.

assets/.nvmrc

@@ -0,0 +1 @@
+lts/fermium

assets/css/base.sass

@@ -3,12 +3,12 @@
 @import 'shared/reset/reset'
 @import 'base/settings/grid'
 @import 'shared/flex-grid/flex-grid'
-@import "~pikaday/scss/pikaday"
+@import "~pikaday/scss/pikaday.scss"
 
 // global styles
 @import 'shared/settings/colors'
 @import 'shared/settings/fonts'
 @import 'base/settings/grid'
 @import 'base/globals/global'
 @import 'base/components/account-info'
-@import 'base/components/nav'
+@import 'base/components/nav'

assets/css/base/globals/_global.sass

@@ -11,8 +11,7 @@ html
     text-decoration: none
 
   .torch-container
-    width:         calc(1325px + 15px + 15px)
-    max-width:     calc(100% - 30px)
+    flex: 1
     margin:        0 auto
     padding-right: 15px
-    padding-left:  15px
+    padding-left:  15px

assets/css/theme.sass

@@ -3,7 +3,7 @@
 @import 'shared/reset/reset'
 @import 'theme/settings/grid'
 @import 'shared/flex-grid/flex-grid'
-@import "~pikaday/scss/pikaday"
+@import "~pikaday/scss/pikaday.scss"
 
 // global styles
 @import 'shared/settings/colors'
@@ -33,4 +33,4 @@
 @import 'theme/pages/index'
 @import 'theme/pages/show'
 @import 'theme/pages/edit'
-@import 'theme/pages/new'
+@import 'theme/pages/new'