Switch to Vite (#319)

.github/workflows/ci.yaml

@@ -46,6 +46,9 @@ jobs:
                   nix-shell --command "python manage.py generate_client_assets"
                   nix-shell --command "python manage.py build"
                   nix-shell --command "scripts/test.sh"
+            - name: Setup tmate session
+              if: ${{ failure() }}
+              uses: mxschmitt/action-tmate@v3
     website_tests:
         name: Website tests
         runs-on: ubuntu-22.04
@@ -56,6 +59,7 @@ jobs:
             - uses: ./.github/actions/setup
             - name: Run tests
               run: |
+                  sed -i '/export {};/d' packages/reactivated/dist/eslintrc.cjs
                   cd website
                   nix-shell --command "python manage.py generate_client_assets"
                   nix-shell --command "scripts/test.sh --all"

development/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-    "extends": ["../node_modules/reactivated/dist/eslintrc.js"]
+    "extends": ["../node_modules/reactivated/dist/eslintrc.cjs"]
 }

development/client/components/Layout.tsx

@@ -38,16 +38,6 @@ export const Layout = (props: Props) => {
                     type="text/css"
                     href={`${context.STATIC_URL}admin/css/fonts.css`}
                 />
-                <link
-                    rel="stylesheet"
-                    type="text/css"
-                    href={`${context.STATIC_URL}dist/index.css`}
-                />
-                <script
-                    defer
-                    crossOrigin="anonymous"
-                    src={`${context.STATIC_URL}dist/index.js`}
-                />
             </Helmet>
             <header className={styles.header}>
                 <a href="/" rel="noopener">

development/client/index.tsx

@@ -6,8 +6,7 @@ import {HelmetProvider} from "react-helmet-async";
 import {createRoot} from "react-dom/client";
 
 const {props, context} = getServerData();
-
-const Template = getTemplate(context);
+const Template = await getTemplate(context);
 
 const root = createRoot(document.getElementById("root")!);
 root.render(

development/client/templates/DjangoDefault.tsx

@@ -5,7 +5,7 @@ import {classNames} from "@reactivated";
 import {Layout} from "@client/components/Layout";
 import * as styles from "@client/styles.css";
 
-export default () => (
+export const Template = () => (
     <Layout
         title="The install worked successfully! Congratulations!"
         className={classNames(

development/client/templates/EditPoll.tsx

@@ -6,7 +6,7 @@ import {Layout} from "@client/components/Layout";
 import * as forms from "@client/forms";
 import * as styles from "@client/styles.css";
 
-export default (props: templates.EditPoll) => {
+export const Template = (props: templates.EditPoll) => {
     const formSet = useFormSet({formSet: props.choice_form_set});
     const title = props.existing_poll == null ? "Create poll" : "Update poll";
 

development/client/templates/FormPlayground.tsx

@@ -4,7 +4,7 @@ import {CSRFToken, Form, FormSet, templates} from "@reactivated";
 
 import {Layout} from "@client/components/Layout";
 
-export default (props: templates.FormPlayground) => (
+export const Template = (props: templates.FormPlayground) => (
     <Layout title="Forms">
         <h1>Forms</h1>
         <form method="POST" action="">

development/client/templates/PollComments.tsx

@@ -6,7 +6,7 @@ import {Layout} from "@client/components/Layout";
 import * as forms from "@client/forms";
 import * as styles from "@client/styles.css";
 
-export default (props: templates.PollComments) => {
+export const Template = (props: templates.PollComments) => {
     const {question} = props;
     const {request} = React.useContext(Context);
     const [comments, setComments] = React.useState(question.comments);

development/client/templates/PollDetail.tsx

@@ -6,7 +6,7 @@ import {Layout} from "@client/components/Layout";
 import * as forms from "@client/forms";
 import * as styles from "@client/styles.css";
 
-export default ({error_message, question}: templates.PollDetail) => (
+export const Template = ({error_message, question}: templates.PollDetail) => (
     <Layout title={question.question_text}>
         <form
             action={reverse("vote", {question_id: question.id})}

development/client/templates/PollsIndex.tsx

@@ -6,7 +6,7 @@ import {Layout} from "@client/components/Layout";
 import * as forms from "@client/forms";
 import * as styles from "@client/styles.css";
 
-export default (props: templates.PollsIndex) => (
+export const Template = (props: templates.PollsIndex) => (
     <Layout
         title="Polls"
         className={styles.sprinkles({

development/client/templates/Results.tsx

@@ -4,7 +4,7 @@ import {reverse, templates} from "@reactivated";
 
 import {Layout} from "@client/components/Layout";
 
-export default ({question}: templates.Results) => (
+export const Template = ({question}: templates.Results) => (
     <Layout title={question.question_text}>
         <h1>{question.question_text}</h1>
         <ul>

development/package.json

@@ -1,5 +1,6 @@
 {
     "name": "development",
+    "type": "module",
     "version": "1.0.0",
     "main": "index.js",
     "author": "Silvio J. Gutierrez <[email protected]>",

development/tsconfig.json

@@ -3,8 +3,9 @@
         "strict": true,
         "sourceMap": true,
         "noEmit": true,
-        "module": "commonjs",
-        "target": "es6",
+        "module": "esnext",
+        "moduleResolution": "node",
+        "target": "es2017",
         "esModuleInterop": true,
         "allowJs": true,
         "jsx": "react",