MyGit

v0.11.0

wasp-lang/wasp

版本发布时间: 2023-06-26 21:07:13

wasp-lang/wasp最新发布版本:v0.15.0-rc1(2024-10-04 20:07:57)

🎉 Big new features 🎉

Check below for details on each of them!

⚠️ Breaking changes

🎉 [New feature] Public directory support

Wasp now supports a public directory in the client directory!

main.wasp
src/
├── client/
|   ├── public/  # <-- NEW!
|   |   ├── favicon.ico
|   |   └── robots.txt
|   └── ...
└── ...

All the files in this directory will be copied as they are to the public directory in the build folder. This is useful for adding static assets to your project, like favicons, robots.txt, etc.

🎉 [New feature] Type safe WebSocket support

Wasp now supports WebSockets! This will allow you to have a persistent, realtime connection between your client and server, which is great for chat apps, games, and more. What's more, Wasp's WebSockets support full-stack type safety, so you can be sure that your client and server are communicating with strongly typed events.

Enable WebSockets in your project by adding the following to your main.wasp file:

app todoApp {
  // ...

  webSocket: {
    fn: import { webSocketFn } from "@server/webSocket.js",
    autoConnect: true, // optional, default: true
  },
}

Then implement it on the server with optional types:

import type { WebSocketDefinition } from '@wasp/webSocket'

export const webSocketFn: WebSocketFn = (io, context) => {
  io.on('connection', (socket) => {
    // ...
  })
}

type WebSocketFn = WebSocketDefinition<
  ClientToServerEvents,
  ServerToClientEvents
>

interface ServerToClientEvents {
  chatMessage: (msg: { id: string, username: string, text: string }) => void;
}

interface ClientToServerEvents {
  chatMessage: (msg: string) => void;
}

And use it on the client with automatic type inference:

import React, { useState } from 'react'
import {
  useSocket,
  useSocketListener,
  ServerToClientPayload,
} from '@wasp/webSocket'

export const ChatPage = () => {
  const [messageText, setMessageText] = useState<
    // We are using a helper type to get the payload type for the "chatMessage" event.
    ClientToServerPayload<'chatMessage'>
  >('')
  const [messages, setMessages] = useState<
    ServerToClientPayload<'chatMessage'>[]
  >([])
  // The "socket" instance is typed with the types you defined on the server.
  const { socket, isConnected } = useSocket()

  // This is a type-safe event handler: "chatMessage" event and its payload type
  // are defined on the server.
  useSocketListener('chatMessage', logMessage)

  function logMessage(msg: ServerToClientPayload<'chatMessage'>) {
    setMessages((priorMessages) => [msg, ...priorMessages])
  }

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    // This is a type-safe event emitter: "chatMessage" event and its payload type
    // are defined on the server.
    socket.emit('chatMessage', messageText)
    // ...
  }

  // ...
}

🎉 [New feature] Automatic CRUD backend generation

You can tell Wasp to automatically generate server-side logic (Queries and Actions) for creating, reading, updating, and deleting a specific entity. As you change that entity, Wasp automatically regenerates the backend logic.

Example of a Task entity with automatic CRUD:

crud Tasks {
  entity: Task,
  operations: {
    getAll: {
      isPublic: true, // by default only logged in users can perform operations
    },
    get: {},
    create: {
      overrideFn: import { createTask } from "@server/tasks.js",
    },
    update: {},
    delete: {},
  },
}

This gives us the following operations: getAll, get, create, update and delete, which we can use in our client like this:

import { Tasks } from '@wasp/crud/Tasks'
import { useState } from 'react'

export const MainPage = () => {
  const { data: tasks, isLoading, error } = Tasks.getAll.useQuery()
  const createTask = Tasks.create.useAction()
  // ...

  function handleCreateTask() {
    createTask({ description: taskDescription, isDone: false })
    setTaskDescription('')
  }

  // ...
}

🎉 [New feature] IDE tooling improvements

Go to definition from wasp file + detection of invalid imports

query getRecipes {
  fn: import { getRecipes } from "@server/recipe.js",  // <- You can now click on this import!
  entities: [Recipe],
}

Wasp language server just got smarter regarding imports in wasp file!

  1. If there is no file to which import points, error is reported.
  2. If file doesn't contain symbol that we are importing, error is reported.
  3. Clicking on import statement now takes you to the code that is being imported.

We have more ideas in this direction on the way though! A bit of a sneak peek of what is coming soon: if Wasp recognizes file / symbol is missing, it will offer to scaffold the code for you!

Autocompletion for dictionary keys

app RecipeApp {
  title: "My Recipes",
  wasp: { version: "^0.10.0" },
  auth: {
    methods: { usernameAndPassword: {} },
    █       // <- your cursor
  }
}

As per popular request, Wasp language server now recognizes when you are in dictionary and will offer possible key values for autocompletion! For instance, in the code example above, it will offer completions such as onAuthFailedRedirectTo, userEntity, ... . It will also show their types.

🐞 Bug fixes / 🔧 small improvements

New Contributors

Full Changelog: https://github.com/wasp-lang/wasp/compare/v0.10.6...v0.11.0

相关地址:原始地址 下载(tar) 下载(zip)

1、 wasp-linux-x86_64.tar.gz 13.15MB

2、 wasp-macos-x86_64.tar.gz 5.89MB

查看:2023-06-26发行的版本