Created
February 9, 2024 09:35
-
-
Save shivekkhurana/a6b002413e1b1717b968ff1041cbadb0 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Chat GPT prompt for generating first pass malli schemas: | |
``` | |
I have a set of react components written in ClojureScript. These components form the design system of a react-native application. I want to introduce prop type checking for these components using the Malli Spec Library. | |
Here's an example of how we spec a component | |
start-clojure-code--- | |
(def ?schema | |
[:=> | |
[:catn | |
[:props | |
[:map {:closed false} | |
[:networks {:optional true} [:maybe [:sequential :any]]] | |
[:container-style {:optional true} [:maybe :map]] | |
[:theme :schema.common/theme]]]] | |
:any]) | |
(defn view-internal | |
[{:keys [networks container-style theme] :as params}] | |
(reagent/with-let [total-width (reagent/atom nil)] | |
[rn/view | |
{:accessibility-label :network-routing | |
:style (style/container container-style theme) | |
:on-layout #(reset! total-width (oops/oget % "nativeEvent.layout.width"))} | |
(when @total-width | |
^{:key (str "network-routing-" (count networks))} | |
[:f> f-network-routing-bars (assoc params :total-width @total-width)])] | |
(finally | |
(doseq [[_ living-timeout] @timeouts] | |
(js/clearTimeout living-timeout))))) | |
(def view | |
(quo.theme/with-theme | |
(schema/instrument #'view-internal ?schema))) | |
end-clojure-code--- | |
``` | |
There are a few things we do: | |
1. Create a `?schema` variable | |
2. Define the schema as an open map | |
3. It's better to err on the side of keeping types optional | |
4. Use function schemas, ie use `:=>`, `:catn` and the return type should be `:any` | |
5. Make sure the schema is correct or you'll be fired | |
6. Point out if the function uses are variable that are not marked explicitly in the arguments | |
Here's another example: | |
(ns quo.components.wallet.progress-bar.view | |
(:require | |
[quo.components.wallet.progress-bar.style :as style] | |
[quo.theme :as quo.theme] | |
[react-native.core :as rn] | |
[schema.core :as schema])) | |
(def ?schema | |
[:=> | |
[:catn | |
[:props | |
[:map {:closed false} | |
[:customization-color {:optional true} [:maybe :schema.common/customization-color]] | |
[:theme :schema.common/theme] | |
[:progressed-value {:optional true} [:maybe [:or :string :int]]] | |
[:full-width? {:optional true} [:maybe :boolean]]]]] | |
:any]) | |
(defn- view-internal | |
[{:keys [full-width?] :as props}] | |
[rn/view | |
{:accessibility-label :progress-bar | |
:style (style/root-container props)} | |
(when full-width? | |
[rn/view {:style (style/progressed-bar props)}])]) | |
(def view | |
(quo.theme/with-theme | |
(schema/instrument #'view-internal ?schema))) | |
In the next steps, I'll give you a new component for which I need the schema to be made. If you understand the instruction reply with a yes or no. Only yes or no, don't give any explanations. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
After entering this prompt, GPT will reply with a
yes
.The in the next prompt, you can paste the component you want to generate the spec for:
ex: