├── .github
    └── FUNDING.yml
├── LICENSE
└── README.md


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 | 
3 | custom: ['https://handle.me/walkerleite']
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Walker Gusmão
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # pure-vue
 2 | [![GitHub milestone](https://img.shields.io/github/milestones/progress-percent/klarkc/pure-vue/1)](https://github.com/users/klarkc/projects/1/views/2)
 3 | [![Backers](https://img.shields.io/badge/backers-0-yellow)](https://handle.me/walkerleite)
 4 | 
 5 | It's [Vue](https://vuejs.org/), it's [PureScript](https://www.purescript.org/). Simple as that.
 6 | 
 7 | ```html
 8 | <!-- Main.vue -->
 9 | <template>
10 |   <button @click="increment">
11 |     Count is: {{ count }}
12 |   </button>
13 | <template>
14 | 
15 | <script lang="purescript">
16 | import Prelude
17 | import Effect (Effect)
18 | import Effect.Console (log) as Effect.Console
19 | import PureVue (UnwrapRef, ref, readonly, expose, set, get, watch)
20 | 
21 | count :: UnwrapRef "count" Int
22 | count = ref 0
23 | 
24 | increment :: UnwrapRef "increment" (Effect Unit)
25 | increment = readonly $ do
26 |   value <- get count
27 |   set count (value + 1)
28 |            
29 | log :: Effect Unit
30 | log = do
31 |   value <- get count
32 |   Effect.Console.log ("count changed to: " <> value)
33 | 
34 | setup :: Effect Unit
35 | setup = do
36 |   expose count
37 |   expose increment
38 |   discard $ watch count log
39 | </script>
40 | ```
41 | 
42 | Normally we use [ELM based](https://guide.elm-lang.org/architecture) design to deal with JS rendering libraries in PureScript, but I would like to try a new approach with something more similar to Vue Composition API + SFC.
43 | 
44 | The central idea is, instead of dealing with Vue as a side-effect free library, use a DSL to compute things and interact with components through the setup hook of Vue components. We are still studying the feasability and effort of doing this without bringing too much noise to the code.
45 | 
46 | The build process would be something like this:
47 | 
48 | ```
49 | vite build -> SFC compiler -> PureVue (PS -> JS) -> SFC compiler (embed setup hook) -> component JS module
50 | ```
51 | 
52 | The advantage of doing this way is that the boilerplate required to build Vue SFC with PureScript is almostly done ([with Vite](https://vitejs.dev)). It also keeps the API isomorphic with Vue allowing a much smaller learning path to PureScript.
53 | 
54 | ## Differences from Vue
55 | 
56 | - PureScript only allows side-effects inside the `Effect` monad, for that reason we can only access or mutate a `Ref` value inside an `Effect` monad.
57 | - Differently from Vue, we don't expect that you use `ref` inside setup hook, our `ref` is just a type constructor and does not generate side-effects, the same applies for `readonly`.
58 | - To reduce boilerplate on PureScript side, all functions on the Vue side that receives a `Ref`, on PureScript side, receives a corresponding `UnwrapRef`.
59 | - `setup` does not receive arguments, to access their values use the respective functions: `useProps` and `useContext`.
60 | - `setup` can only return a wrapped render function (TODO: render type) or `Unit`, to define the template bindings use `expose` function.
61 | - `expose` is a effectful function which exposes a `UnwrapRef` to the [Vue template](https://vuejs.org/guide/essentials/template-syntax.html) as a [reactive](https://vuejs.org/guide/essentials/reactivity-fundamentals.html) `Ref (unwrap)` value.
62 | 
63 | ## Differences from PureScript
64 | 
65 | - We don't define a module with `module` keyword, the module definition is set by the SFC compiler before purs compilation.
66 | - The only exported function is `setup`, that is used as [setup hook](https://vuejs.org/api/composition-api-setup.html) in component options by the SFC compiler.
67 | - 
68 | ## Why I've Given Up on This Project
69 | 
70 | There are a few reasons why I'm giving up on this project, after a [very insightful discussion on PureScript Discord](https://discord.com/channels/864614189094928394/865401680497737758/1212131706740412416):
71 | 
72 | 1. I realized the complexity of building a type-checking solution. Besides being outside the scope of the proof of concept, it would be essential to make this solution usable in any sense, and I don't have any expertise in this topic.
73 | 2. To have type-checking in place, we would need to fork `@vue/language-core` to have a `vue-purs` alternative akin to `vue-tsc`. This would demand even a fork of the Vue language server itself.
74 | 3. `@vue/language-core` is currently entangled with TypeScript ([see](https://github.com/vuejs/language-tools/blob/16635035be40be98e1f724f69cedbec50fcc295c/packages/language-core/lib/parsers/scriptRanges.ts#L2)).
75 | 


--------------------------------------------------------------------------------