create-absolutejs 0.8.2 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/LICENSE +24 -24
  2. package/README.md +179 -179
  3. package/dist/data.js +3 -0
  4. package/dist/generators/configurations/generateDrizzleConfig.js +15 -15
  5. package/dist/generators/configurations/generatePrettierrc.js +9 -9
  6. package/dist/generators/configurations/initializeRoot.js +2 -0
  7. package/dist/generators/db/dockerInitTemplates.js +79 -79
  8. package/dist/generators/db/generateDatabaseTypes.js +6 -6
  9. package/dist/generators/db/generateDockerContainer.js +19 -19
  10. package/dist/generators/db/generateDrizzleSchema.js +17 -17
  11. package/dist/generators/db/generateSqliteSchema.js +8 -8
  12. package/dist/generators/db/handlerTemplates.js +259 -259
  13. package/dist/generators/db/scaffoldDocker.js +1 -1
  14. package/dist/generators/html/generateHTMLPage.js +60 -60
  15. package/dist/generators/htmx/generateHTMXPage.js +86 -86
  16. package/dist/generators/project/generateAbsoluteAuthConfig.js +96 -96
  17. package/dist/generators/project/generateBuildBlock.d.ts +2 -1
  18. package/dist/generators/project/generateBuildBlock.js +9 -5
  19. package/dist/generators/project/generateDBBlock.js +9 -9
  20. package/dist/generators/project/generateImportsBlock.js +1 -0
  21. package/dist/generators/project/generateMarkupCSS.js +145 -145
  22. package/dist/generators/project/generateRoutesBlock.js +36 -36
  23. package/dist/generators/project/generateServer.d.ts +2 -1
  24. package/dist/generators/project/generateServer.js +29 -19
  25. package/dist/generators/project/scaffoldBackend.d.ts +2 -1
  26. package/dist/generators/project/scaffoldBackend.js +2 -1
  27. package/dist/generators/react/generateReactComponents.js +95 -95
  28. package/dist/generators/svelte/generateSveltePage.js +210 -210
  29. package/dist/generators/vue/generateVuePage.js +261 -261
  30. package/dist/messages.js +43 -43
  31. package/dist/scaffold.js +1 -0
  32. package/dist/templates/README.md +35 -35
  33. package/dist/templates/assets/svg/google-logo.svg +7 -7
  34. package/dist/templates/assets/svg/htmx-logo-black.svg +9 -9
  35. package/dist/templates/assets/svg/htmx-logo-white.svg +9 -9
  36. package/dist/templates/assets/svg/vue-logo.svg +4 -4
  37. package/dist/templates/configurations/.prettierignore +3 -3
  38. package/dist/templates/configurations/.prettierrc.json +9 -9
  39. package/dist/templates/configurations/drizzle.config.ts +13 -13
  40. package/dist/templates/configurations/eslint.config.mjs +243 -243
  41. package/dist/templates/configurations/tsconfig.example.json +98 -98
  42. package/dist/templates/constants.ts +2 -2
  43. package/dist/templates/db/docker-compose.db.yml +15 -15
  44. package/dist/templates/git/gitignore +51 -51
  45. package/dist/templates/html/scripts/typescript-example.ts +21 -21
  46. package/dist/templates/react/components/App.tsx +52 -52
  47. package/dist/templates/react/components/Head.tsx +34 -34
  48. package/dist/templates/react/components/OAuthLink.tsx +39 -39
  49. package/dist/templates/react/components/ProfilePicture.tsx +56 -56
  50. package/dist/templates/styles/colors.ts +11 -11
  51. package/dist/templates/styles/reset.css +84 -84
  52. package/dist/templates/svelte/components/Counter.svelte +19 -19
  53. package/dist/templates/svelte/composables/counter.svelte.ts +14 -14
  54. package/dist/templates/tailwind/postcss.config.ts +8 -8
  55. package/dist/templates/tailwind/tailwind.config.ts +7 -7
  56. package/dist/templates/tailwind/tailwind.css +1 -1
  57. package/dist/templates/vue/components/CountButton.vue +39 -39
  58. package/dist/templates/vue/composables/useCount.ts +14 -14
  59. package/dist/versions.d.ts +1 -1
  60. package/dist/versions.js +1 -1
  61. package/package.json +1 -1
@@ -1,39 +1,39 @@
1
- import { ProviderOption } from 'citra';
2
-
3
- type OAuthLinkProps = {
4
- logoUrl: string;
5
- name: string;
6
- provider: Lowercase<ProviderOption> | undefined;
7
- mode: 'in' | 'up';
8
- };
9
-
10
- export const OAuthLink = ({
11
- provider,
12
- logoUrl,
13
- name,
14
- mode
15
- }: OAuthLinkProps) => {
16
- const buttonText = `Sign ${mode} with ${name}`;
17
-
18
- return (
19
- <a
20
- style={{
21
- alignItems: 'center',
22
- display: 'flex',
23
- gap: '0.5rem'
24
- }}
25
- href={provider ? `/oauth2/${provider}/authorization` : undefined}
26
- >
27
- {provider ? (
28
- <img
29
- style={{ height: '2rem', width: '2rem' }}
30
- alt={`${name} logo`}
31
- src={logoUrl}
32
- />
33
- ) : (
34
- <p>Provider not configured</p>
35
- )}
36
- <span>{buttonText}</span>
37
- </a>
38
- );
39
- };
1
+ import { ProviderOption } from 'citra';
2
+
3
+ type OAuthLinkProps = {
4
+ logoUrl: string;
5
+ name: string;
6
+ provider: Lowercase<ProviderOption> | undefined;
7
+ mode: 'in' | 'up';
8
+ };
9
+
10
+ export const OAuthLink = ({
11
+ provider,
12
+ logoUrl,
13
+ name,
14
+ mode
15
+ }: OAuthLinkProps) => {
16
+ const buttonText = `Sign ${mode} with ${name}`;
17
+
18
+ return (
19
+ <a
20
+ style={{
21
+ alignItems: 'center',
22
+ display: 'flex',
23
+ gap: '0.5rem'
24
+ }}
25
+ href={provider ? `/oauth2/${provider}/authorization` : undefined}
26
+ >
27
+ {provider ? (
28
+ <img
29
+ style={{ height: '2rem', width: '2rem' }}
30
+ alt={`${name} logo`}
31
+ src={logoUrl}
32
+ />
33
+ ) : (
34
+ <p>Provider not configured</p>
35
+ )}
36
+ <span>{buttonText}</span>
37
+ </a>
38
+ );
39
+ };
@@ -1,56 +1,56 @@
1
- type ProfilePictureProps = {
2
- userImage: string | null | undefined;
3
- givenName?: string;
4
- familyName?: string;
5
- color?: string;
6
- width?: string;
7
- height?: string;
8
- fontSize?: string;
9
- };
10
-
11
- export const ProfilePicture = ({
12
- userImage,
13
- givenName = '',
14
- familyName = '',
15
- color = '#4285F4',
16
- width = '2rem',
17
- height = '2rem',
18
- fontSize = '0.85rem'
19
- }: ProfilePictureProps) => {
20
- if (userImage) {
21
- return (
22
- <img
23
- alt="Profile"
24
- src={userImage}
25
- style={{
26
- borderRadius: '50%',
27
- height,
28
- objectFit: 'cover',
29
- width
30
- }}
31
- />
32
- );
33
- }
34
-
35
- const initials = `${givenName.charAt(0).toUpperCase()}${familyName.charAt(0).toUpperCase()}`;
36
-
37
- return (
38
- <div
39
- style={{
40
- alignItems: 'center',
41
- backgroundColor: color,
42
- borderRadius: '50%',
43
- color: 'white',
44
- display: 'flex',
45
- fontSize,
46
- fontWeight: 600,
47
- height,
48
- justifyContent: 'center',
49
- userSelect: 'none',
50
- width
51
- }}
52
- >
53
- {initials}
54
- </div>
55
- );
56
- };
1
+ type ProfilePictureProps = {
2
+ userImage: string | null | undefined;
3
+ givenName?: string;
4
+ familyName?: string;
5
+ color?: string;
6
+ width?: string;
7
+ height?: string;
8
+ fontSize?: string;
9
+ };
10
+
11
+ export const ProfilePicture = ({
12
+ userImage,
13
+ givenName = '',
14
+ familyName = '',
15
+ color = '#4285F4',
16
+ width = '2rem',
17
+ height = '2rem',
18
+ fontSize = '0.85rem'
19
+ }: ProfilePictureProps) => {
20
+ if (userImage) {
21
+ return (
22
+ <img
23
+ alt="Profile"
24
+ src={userImage}
25
+ style={{
26
+ borderRadius: '50%',
27
+ height,
28
+ objectFit: 'cover',
29
+ width
30
+ }}
31
+ />
32
+ );
33
+ }
34
+
35
+ const initials = `${givenName.charAt(0).toUpperCase()}${familyName.charAt(0).toUpperCase()}`;
36
+
37
+ return (
38
+ <div
39
+ style={{
40
+ alignItems: 'center',
41
+ backgroundColor: color,
42
+ borderRadius: '50%',
43
+ color: 'white',
44
+ display: 'flex',
45
+ fontSize,
46
+ fontWeight: 600,
47
+ height,
48
+ justifyContent: 'center',
49
+ userSelect: 'none',
50
+ width
51
+ }}
52
+ >
53
+ {initials}
54
+ </div>
55
+ );
56
+ };
@@ -1,11 +1,11 @@
1
- export const primaryColor = '#5FBEEB';
2
- export const secondaryColor = '#35d5a2';
3
- export const tertiaryColor = '#ff4b91';
4
-
5
- export const lightPrimaryColor = '#ffffff';
6
- export const lightSecondaryColor = '#f5f5f5';
7
- export const lightTertiaryColor = '#e0e0e0';
8
-
9
- export const darkPrimaryColor = '#1a1a1a';
10
- export const darkSecondaryColor = '#2c2c2c';
11
- export const darkTertiaryColor = '#3c3c3c';
1
+ export const primaryColor = '#5FBEEB';
2
+ export const secondaryColor = '#35d5a2';
3
+ export const tertiaryColor = '#ff4b91';
4
+
5
+ export const lightPrimaryColor = '#ffffff';
6
+ export const lightSecondaryColor = '#f5f5f5';
7
+ export const lightTertiaryColor = '#e0e0e0';
8
+
9
+ export const darkPrimaryColor = '#1a1a1a';
10
+ export const darkSecondaryColor = '#2c2c2c';
11
+ export const darkTertiaryColor = '#3c3c3c';
@@ -1,84 +1,84 @@
1
- * {
2
- box-sizing: border-box;
3
- line-height: 1.5;
4
- margin: 0;
5
- padding: 0;
6
- }
7
-
8
- html {
9
- font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
10
- height: 100%;
11
- }
12
-
13
- body {
14
- background-color: #2c2c2c;
15
- color: #f5f5f5;
16
- color-scheme: light dark;
17
- display: flex;
18
- flex-direction: column;
19
- font-synthesis: none;
20
- font-weight: 400;
21
- height: 100%;
22
- -moz-osx-font-smoothing: grayscale;
23
- text-rendering: optimizeLegibility;
24
- -webkit-font-smoothing: antialiased;
25
- }
26
-
27
- main {
28
- align-items: center;
29
- display: flex;
30
- flex: 1;
31
- flex-direction: column;
32
- justify-content: center;
33
- text-align: center;
34
- }
35
-
36
- h1,
37
- h2,
38
- h3,
39
- h4,
40
- h5,
41
- h6 {
42
- line-height: 1.1;
43
- }
44
-
45
- p {
46
- font-size: 1.2rem;
47
- max-width: 1280px;
48
- }
49
-
50
- a {
51
- color: #5fbeeb;
52
- font-size: 1.5rem;
53
- font-weight: 500;
54
- position: relative;
55
- text-decoration: none;
56
- }
57
-
58
- button {
59
- background-color: #1a1a1a;
60
- border: 1px solid transparent;
61
- border-radius: 0.5rem;
62
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
63
- cursor: pointer;
64
- font-family: inherit;
65
- font-size: 1.1rem;
66
- font-weight: 500;
67
- margin: 2rem 0;
68
- padding: 0.6rem 1.2rem;
69
- transition: border-color 0.25s;
70
- }
71
- button:hover {
72
- border-color: #5fbeeb;
73
- }
74
- button:focus,
75
- button:focus-visible {
76
- outline: 4px auto -webkit-focus-ring-color;
77
- }
78
-
79
- @media (prefers-color-scheme: light) {
80
- body {
81
- background-color: #f5f5f5;
82
- color: #1a1a1a;
83
- }
84
- }
1
+ * {
2
+ box-sizing: border-box;
3
+ line-height: 1.5;
4
+ margin: 0;
5
+ padding: 0;
6
+ }
7
+
8
+ html {
9
+ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
10
+ height: 100%;
11
+ }
12
+
13
+ body {
14
+ background-color: #2c2c2c;
15
+ color: #f5f5f5;
16
+ color-scheme: light dark;
17
+ display: flex;
18
+ flex-direction: column;
19
+ font-synthesis: none;
20
+ font-weight: 400;
21
+ height: 100%;
22
+ -moz-osx-font-smoothing: grayscale;
23
+ text-rendering: optimizeLegibility;
24
+ -webkit-font-smoothing: antialiased;
25
+ }
26
+
27
+ main {
28
+ align-items: center;
29
+ display: flex;
30
+ flex: 1;
31
+ flex-direction: column;
32
+ justify-content: center;
33
+ text-align: center;
34
+ }
35
+
36
+ h1,
37
+ h2,
38
+ h3,
39
+ h4,
40
+ h5,
41
+ h6 {
42
+ line-height: 1.1;
43
+ }
44
+
45
+ p {
46
+ font-size: 1.2rem;
47
+ max-width: 1280px;
48
+ }
49
+
50
+ a {
51
+ color: #5fbeeb;
52
+ font-size: 1.5rem;
53
+ font-weight: 500;
54
+ position: relative;
55
+ text-decoration: none;
56
+ }
57
+
58
+ button {
59
+ background-color: #1a1a1a;
60
+ border: 1px solid transparent;
61
+ border-radius: 0.5rem;
62
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
63
+ cursor: pointer;
64
+ font-family: inherit;
65
+ font-size: 1.1rem;
66
+ font-weight: 500;
67
+ margin: 2rem 0;
68
+ padding: 0.6rem 1.2rem;
69
+ transition: border-color 0.25s;
70
+ }
71
+ button:hover {
72
+ border-color: #5fbeeb;
73
+ }
74
+ button:focus,
75
+ button:focus-visible {
76
+ outline: 4px auto -webkit-focus-ring-color;
77
+ }
78
+
79
+ @media (prefers-color-scheme: light) {
80
+ body {
81
+ background-color: #f5f5f5;
82
+ color: #1a1a1a;
83
+ }
84
+ }
@@ -1,19 +1,19 @@
1
- <script lang="ts">
2
- type CounterProps = {
3
- initialCount: number;
4
- };
5
-
6
- let { initialCount }: CounterProps = $props();
7
- import { counter } from '../composables/counter.svelte';
8
- const { getCount, increment } = counter(initialCount);
9
- </script>
10
-
11
- <button onclick={increment}>count is {getCount()}</button>
12
-
13
- <style>
14
- @media (prefers-color-scheme: light) {
15
- button {
16
- background-color: #ffffff;
17
- }
18
- }
19
- </style>
1
+ <script lang="ts">
2
+ type CounterProps = {
3
+ initialCount: number;
4
+ };
5
+
6
+ let { initialCount }: CounterProps = $props();
7
+ import { counter } from '../composables/counter.svelte';
8
+ const { getCount, increment } = counter(initialCount);
9
+ </script>
10
+
11
+ <button onclick={increment}>count is {getCount()}</button>
12
+
13
+ <style>
14
+ @media (prefers-color-scheme: light) {
15
+ button {
16
+ background-color: #ffffff;
17
+ }
18
+ }
19
+ </style>
@@ -1,14 +1,14 @@
1
- export const counter = (initialCount: number) => {
2
- let count = $state(initialCount);
3
-
4
- const getCount = () => count;
5
-
6
- const increment = () => {
7
- count += 1;
8
- };
9
-
10
- return {
11
- getCount,
12
- increment
13
- };
14
- };
1
+ export const counter = (initialCount: number) => {
2
+ let count = $state(initialCount);
3
+
4
+ const getCount = () => count;
5
+
6
+ const increment = () => {
7
+ count += 1;
8
+ };
9
+
10
+ return {
11
+ getCount,
12
+ increment
13
+ };
14
+ };
@@ -1,8 +1,8 @@
1
- import autoprefixer from 'autoprefixer';
2
- import tailwindcss from 'tailwindcss';
3
-
4
- const config = {
5
- plugins: [tailwindcss, autoprefixer]
6
- };
7
-
8
- export default config;
1
+ import autoprefixer from 'autoprefixer';
2
+ import tailwindcss from 'tailwindcss';
3
+
4
+ const config = {
5
+ plugins: [tailwindcss, autoprefixer]
6
+ };
7
+
8
+ export default config;
@@ -1,7 +1,7 @@
1
- import type { Config } from 'tailwindcss';
2
-
3
- const config: Config = {
4
- content: ['./src/frontend/**/*.{js,ts,jsx,tsx,mdx}']
5
- };
6
-
7
- export default config;
1
+ import type { Config } from 'tailwindcss';
2
+
3
+ const config: Config = {
4
+ content: ['./src/frontend/**/*.{js,ts,jsx,tsx,mdx}']
5
+ };
6
+
7
+ export default config;
@@ -1 +1 @@
1
- @import 'tailwindcss';
1
+ @import 'tailwindcss';
@@ -1,39 +1,39 @@
1
- <script setup lang="ts">
2
- import { useCount } from '../composables/useCount';
3
-
4
- const props = defineProps<{ initialCount: number }>();
5
- const { count, increment } = useCount(props.initialCount);
6
- </script>
7
-
8
- <template>
9
- <button @click="increment">count is {{ count }}</button>
10
- </template>
11
-
12
- <style scoped>
13
- button {
14
- background-color: #1a1a1a;
15
- border: 1px solid transparent;
16
- border-radius: 0.5rem;
17
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
18
- cursor: pointer;
19
- font-family: inherit;
20
- font-size: 1.1rem;
21
- font-weight: 500;
22
- margin: 2rem 0;
23
- padding: 0.6rem 1.2rem;
24
- transition: border-color 0.25s;
25
- }
26
- button:hover {
27
- border-color: #5fbeeb;
28
- }
29
- button:focus,
30
- button:focus-visible {
31
- outline: 4px auto -webkit-focus-ring-color;
32
- }
33
-
34
- @media (prefers-color-scheme: light) {
35
- button {
36
- background-color: #ffffff;
37
- }
38
- }
39
- </style>
1
+ <script setup lang="ts">
2
+ import { useCount } from '../composables/useCount';
3
+
4
+ const props = defineProps<{ initialCount: number }>();
5
+ const { count, increment } = useCount(props.initialCount);
6
+ </script>
7
+
8
+ <template>
9
+ <button @click="increment">count is {{ count }}</button>
10
+ </template>
11
+
12
+ <style scoped>
13
+ button {
14
+ background-color: #1a1a1a;
15
+ border: 1px solid transparent;
16
+ border-radius: 0.5rem;
17
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
18
+ cursor: pointer;
19
+ font-family: inherit;
20
+ font-size: 1.1rem;
21
+ font-weight: 500;
22
+ margin: 2rem 0;
23
+ padding: 0.6rem 1.2rem;
24
+ transition: border-color 0.25s;
25
+ }
26
+ button:hover {
27
+ border-color: #5fbeeb;
28
+ }
29
+ button:focus,
30
+ button:focus-visible {
31
+ outline: 4px auto -webkit-focus-ring-color;
32
+ }
33
+
34
+ @media (prefers-color-scheme: light) {
35
+ button {
36
+ background-color: #ffffff;
37
+ }
38
+ }
39
+ </style>
@@ -1,14 +1,14 @@
1
- import { ref } from 'vue';
2
-
3
- export const useCount = (initialCount: number) => {
4
- const count = ref(initialCount);
5
-
6
- const increment = () => {
7
- count.value++;
8
- };
9
-
10
- return {
11
- count,
12
- increment
13
- };
14
- };
1
+ import { ref } from 'vue';
2
+
3
+ export const useCount = (initialCount: number) => {
4
+ const count = ref(initialCount);
5
+
6
+ const increment = () => {
7
+ count.value++;
8
+ };
9
+
10
+ return {
11
+ count,
12
+ increment
13
+ };
14
+ };
@@ -4,7 +4,7 @@
4
4
  * Run `bun run check-versions` to compare against latest npm versions.
5
5
  */
6
6
  export declare const versions: {
7
- readonly '@absolutejs/absolute': "0.13.5";
7
+ readonly '@absolutejs/absolute': "0.15.7";
8
8
  readonly '@absolutejs/auth': "0.22.0";
9
9
  readonly '@elysiajs/static': "1.4.7";
10
10
  readonly elysia: "1.4.22";
package/dist/versions.js CHANGED
@@ -5,7 +5,7 @@
5
5
  */
6
6
  export const versions = {
7
7
  /* ── Core ─────────────────────────────────────────────── */
8
- '@absolutejs/absolute': '0.13.5',
8
+ '@absolutejs/absolute': '0.15.7',
9
9
  '@absolutejs/auth': '0.22.0',
10
10
  '@elysiajs/static': '1.4.7',
11
11
  elysia: '1.4.22',
package/package.json CHANGED
@@ -49,5 +49,5 @@
49
49
  "typecheck": "bun run tsc --noEmit"
50
50
  },
51
51
  "type": "module",
52
- "version": "0.8.2"
52
+ "version": "0.9.0"
53
53
  }