- - AshTypescript -
-- Type-safe TypeScript bindings for Ash Framework -
-- Configure RPC in Your Domain -
-- Add the AshTypescript.Rpc extension to your domain and configure RPC actions: -
-
-
- {\`defmodule MyApp.Accounts do
- use Ash.Domain, extensions: [AshTypescript.Rpc]
+ const root = createRoot(document.getElementById("app")!);
- typescript_rpc do
- resource MyApp.Accounts.User do
- rpc_action :get_by_email, :get_by_email
- rpc_action :list_users, :read
- rpc_action :get_user, :read
- end
- end
+ root.render(
+
+ ,
+ );
+ """
- resources do
- resource MyApp.Accounts.User
- end
- end\`}
-
-
- - TypeScript Auto-Generation -
-- When running the dev server, TypeScript types are automatically generated for you: -
-
- mix phx.server
-
- - ✨ Automatic regeneration: TypeScript files are automatically regenerated whenever you make changes to your resources or expose new RPC actions. No manual codegen step required during development! -
-- For production builds or manual generation, you can also run: -
-
- mix ash_typescript.codegen --output "assets/js/ash_generated.ts"
-
- - Import and Use Generated Functions -
-- Import the generated RPC functions in your TypeScript/React code: -
-
-
- {\`import { getByEmail, listUsers, getUser } from "./ash_generated";
+ vue_component = script_content <> "\n" <> template_content
- // Use the typed RPC functions
- const findUserByEmail = async (email: string) => {
- try {
- const result = await getByEmail({ email });
- if (result.success) {
- console.log("User found:", result.data);
- return result.data;
- } else {
- console.error("User not found:", result.errors);
- return null;
- }
- } catch (error) {
- console.error("Network error:", error);
- return null;
- }
- };
+ vue_index_content = """
+ import { createApp } from "vue";
+ import App from "./App.vue";
+ import Prism from "prismjs";
+ import "prismjs/components/prism-elixir";
+ import "prismjs/components/prism-bash";
+ import "prismjs/components/prism-typescript";
- const fetchUsers = async () => {
- try {
- const result = await listUsers();
- if (result.success) {
- console.log("Users:", result.data);
- } else {
- console.error("Failed to fetch users:", result.errors);
- }
- } catch (error) {
- console.error("Network error:", error);
- }
- };\`}
-
-
- - Learn More & Examples -
-Documentation
-Complete API reference and guides on HexDocs
-Source Code
-View the source, report issues, and contribute on GitHub
-Demo App
-See AshTypescript with TanStack Query & Table in action
-by ChristianAlexander
-- Ready to Get Started? -
-- Check your generated RPC functions and start building type-safe interactions between your frontend and Ash resources! -
-