simolus3 / zap Goto Github PK

Once the sass_builder package supports emitting source maps, we can use it to compile sass stylesheets instead of zap_dev containing yet another builder for Sass.

Hello, thank you for create Zap as very nice Dart alternative of Svelte. :)

I have one question:
When I saw some examples, I didn't understand what means watchables.: https://simonbinder.eu/zap/examples/#watch-write
But after some time of thinking I discovered that it is same as Store in Svelte.

My question is:
Why are you not keeping same naming convention what it is in Svelte?
I think that when Zap is developed following the Svelte pattern so it can be easy for Svelte developers (like me) understand Zap and move or understand everything in Zap when we will keep the same naming convention.

So I think that Store can be better name than Watchables in docs.
What do you think about it?

A few friendly suggestions:

• It would be great to enable Discussions on this repo so that questions could be asked that aren't really issues with the framework.
• Additionally it would be helpful to know what issues you feel someone could work on to get started contributing. I'd be happy to contribute or tackle one of the current issues, but I have no clue if you are planning or in the middle of working on them right now. If you want to work on them or feel like it is a major change that you want to oversee, maybe assign yourself as the Assignee on the issue so newcomers know what they can contribute on.
• Finally I'm wondering if it would make sense to contribute a default set of components in a separate package such as material_zap for material components, and if that could be an official package hosted in this repo rather than some 3rd party solution. This way the community could come together to contribute high quality components. It would reduce the barrier to entry for contributing, and would help the community grow faster, as well as reduce fragmentation in the ecosystem I think. The default set of material components in flutter for example I think is what makes it so popular and easy to get started working with or contributing to.

Anyways, glad to see this project!

Hi,
Do you have any plan to build a example complete website, where you are using DI, Routing etc.

In zap components, we move local variables to instance variables in a component. As flow analysis only works for local variables, code relying on flow typing will break.

We could use the analyzer to find variable references (SimpleIdentifier) that have a more specific static type than the local variable they're referencing. If that's the case, we could mark them somehow to generate the necessary cast or non-null assertion in the generator.

Hello!

I am extremely interested in this project, but I can't get a build running.

I downloaded the starter bundle, unzipped, checked readme, and both the dev and build commands failed straightaway.

Any ideas?

Log output:

❯ dart run webdev build
[INFO] ../../../.pub-cache/hosted/pub.dev/build_modules-4.0.5/lib/src/module_cache.dart:21:70: Error:
[INFO] Try correcting the name to the name of an existing method, or defining a method named 'toJson'
[INFO] ../../../.pub-cache/hosted/pub.dev/build_modules-4.0.5/lib/src/module_cache.dart:24:66: Error:
[INFO] Try correcting the name to the name of an existing method, or defining a method named 'toJson'
[SEVERE] Failed to precompile build script .dart_tool/build/entrypoint/build.dart.
[SEVERE] This is likely caused by a misconfigured builder definition.
[SEVERE] 
Unhandled exception:
Bad state: Unable to start build daemon.
#0      _handleDaemonStartup.<anonymous closure> (package:build_daemon/client.dart:79:21)
#1      _runUserCode (dart:async/stream_pipe.dart:11:23)
#2      Stream.firstWhere.<anonymous closure> (dart:async/stream.dart:1704:9)
#3      _RootZone.runGuarded (dart:async/zone.dart:1581:10)
#4      _BufferingStreamSubscription._sendDone.sendDone (dart:async/stream_impl.dart:392:13)
#5      _BufferingStreamSubscription._sendDone (dart:async/stream_impl.dart:402:7)
#6      _BufferingStreamSubscription._close (dart:async/stream_impl.dart:291:7)
#7      _SyncBroadcastStreamController._sendDone.<anonymous closure> (dart:async/broadcast_stream_controller.dart:399:22)
#8      _BroadcastStreamController._forEachListener (dart:async/broadcast_stream_controller.dart:322:15)
#9      _SyncBroadcastStreamController._sendDone (dart:async/broadcast_stream_controller.dart:398:7)
#10     _BroadcastStreamController.close (dart:async/broadcast_stream_controller.dart:268:5)
#11     _AsBroadcastStreamController.close (dart:async/broadcast_stream_controller.dart:505:27)
#12     _RootZone.runGuarded (dart:async/zone.dart:1581:10)
#13     _BufferingStreamSubscription._sendDone.sendDone (dart:async/stream_impl.dart:392:13)
#14     _BufferingStreamSubscription._sendDone (dart:async/stream_impl.dart:402:7)
#15     _BufferingStreamSubscription._close (dart:async/stream_impl.dart:291:7)
#16     _SinkTransformerStreamSubscription._close (dart:async/stream_transformers.dart:87:11)
#17     _EventSinkWrapper.close (dart:async/stream_transformers.dart:21:11)
#18     _StringAdapterSink.close (dart:convert/string_conversion.dart:251:11)
#19     _LineSplitterSink.close (dart:convert/line_splitter.dart:137:11)
#20     _SinkTransformerStreamSubscription._handleDone (dart:async/stream_transformers.dart:132:24)
#21     _RootZone.runGuarded (dart:async/zone.dart:1581:10)
#22     _BufferingStreamSubscription._sendDone.sendDone (dart:async/stream_impl.dart:392:13)
#23     _BufferingStreamSubscription._sendDone (dart:async/stream_impl.dart:402:7)
#24     _BufferingStreamSubscription._close (dart:async/stream_impl.dart:291:7)
#25     _SinkTransformerStreamSubscription._close (dart:async/stream_transformers.dart:87:11)
#26     _EventSinkWrapper.close (dart:async/stream_transformers.dart:21:11)
#27     _StringAdapterSink.close (dart:convert/string_conversion.dart:251:11)
#28     _Utf8ConversionSink.close (dart:convert/string_conversion.dart:305:20)
#29     _ConverterStreamEventSink.close (dart:convert/chunked_conversion.dart:81:18)
#30     _SinkTransformerStreamSubscription._handleDone (dart:async/stream_transformers.dart:132:24)
#31     _RootZone.runGuarded (dart:async/zone.dart:1581:10)
#32     _BufferingStreamSubscription._sendDone.sendDone (dart:async/stream_impl.dart:392:13)
#33     _BufferingStreamSubscription._sendDone (dart:async/stream_impl.dart:402:7)
#34     _BufferingStreamSubscription._close (dart:async/stream_impl.dart:291:7)
#35     _SyncStreamControllerDispatch._sendDone (dart:async/stream_controller.dart:782:19)
#36     _StreamController._closeUnchecked (dart:async/stream_controller.dart:637:7)
#37     _StreamController.close (dart:async/stream_controller.dart:630:5)
#38     _Socket._onData (dart:io-patch/socket_patch.dart:2362:21)
#39     _RootZone.runUnaryGuarded (dart:async/zone.dart:1593:10)
#40     _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:339:11)
#41     _BufferingStreamSubscription._add (dart:async/stream_impl.dart:271:7)
#42     _SyncStreamControllerDispatch._sendData (dart:async/stream_controller.dart:774:19)
#43     _StreamController._add (dart:async/stream_controller.dart:648:7)
#44     _StreamController.add (dart:async/stream_controller.dart:596:5)
#45     new _RawSocket.<anonymous closure> (dart:io-patch/socket_patch.dart:1884:35)
#46     _NativeSocket.issueReadEvent.issue (dart:io-patch/socket_patch.dart:1327:18)
#47     _microtaskLoop (dart:async/schedule_microtask.dart:40:21)
#48     _startMicrotaskLoop (dart:async/schedule_microtask.dart:49:5)
#49     _runPendingImmediateCallback (dart:isolate-patch/isolate_patch.dart:123:13)
#50     _RawReceivePort._handleMessage (dart:isolate-patch/isolate_patch.dart:193:5)

Please read the title

In the docs page all opening { are missing.

In preparation for server-side rendering, we need some mechanism to generate components that don't depend on dart:html. This will likely be a build option, but we can make the transition easier by already using universal_html under the hood. universal_html is an alias for dart:html when compiling to the web, but defines compatible APIs for use on the Dart VM too.

With universal_html, we can also make it easier to debug and test zap component logic outside of a browser. It would be interesting to know how much currently breaks when using universal_html, so a investigation would be really helpful.

• We can probably replace dart:html imports in the zap package.
• In the zap_dev generator package, we can use the import rewriting mechanism to rewrite dart:html imports in <script> tags with universal html imports.

Some things that would be interesting to know:

• How many of the current zap components (in this repo) break when using universal_html? Will be a lot of effort to fix them?
• Can we reliably run tests for some components in the Dart VM when using universal_html?

As of b3ffffe, watch() is supported at any point in a Dart expression, including DOM-inline expressions.

However, we're still missing support for propagating changes to the source of a watch() call, e.g:

Watchable<int> watchable;

$: watchable = someCondition ? watchableA : watchableB;

var test = watch(watchable); // needs to update as `someCondition` changes

With the current implementation, adding support for mutable watch sources would also enable nested watch() calls.

We currently just add a class to every selector, which doesn't appear to always be correct and certainly isn't the most efficient approach. This process could probably be optimized, for instance by once again looking at how Svelte is doing it.

While we're at it, we could also try to find all nodes potentially affected by styles at compile-time and only add relevant classes to them.

This is currently broken:

<script>
  @prop
  num lat, lon, zoom;
</script>

Hi there!

Have you considered a Flutter-esque syntax rather than templates that resemble svelte?

For example:

class MyInput extends StatelessWidget
{
  MyInput({this.onClick});

  final void Function()? onClick;

  @override
  Widget build(BuildContext context) {
    return Input(className: "my-input", onClick: onClick)
  }
}

In this case MyInput would be equivalent to a React component and we'd return a mix of our own instances of widgets and built-in html elements.

And StatelessWidget, BuildContext, and so on would be implemented from scratch but happen to have the same name.

There are some benefits I see:

• The teams that have Flutter apps don't have to understand a completely different paradigm if they are required to build a web-app but want to reuse some Dart business logic from the Flutter app
• We can lean on our code editors to help with autocomplete, refactoring, etc
• The implementation effort may be lower -- you won't have to create a templating language, a compilation step, or any of that.

I'm sure you've already weighed the options, but was curious to hear your thoughts!

We'd potentially be interested in sponsoring something for zap like this if there is interest.

I see that with Zap I can create code in Dart and import Dart packages on the frontend.
But what when I will want to use some JavaScript library in my project?
Is somewhere some example of how Zap can interop with JavaScript?

We have some examples live on the documentation page, but we should have more! In particular, we're currently missing out on larger or even end-to-end examples that could be downloaded and are ready to run.

Some ideas for examples could be:

• Implementations for the 7GUIs tasks evaluating the expressiveness of GUI toolkits. I've started implementing some of them in examples/, but it would be better to have working examples in the docs.
• Examples using riverpod_zap (there's one in riverpod_zap/example which could serve as a starting point)
• Full example packages (e.g. things that could be downloaded and are ready to run). There's a project downloader in the docs, but we could expand it to different prebuilt templates. Those templates could also be more complex (e.g. depend on external Sass packages, combine multiple builders, ...).

More ideas for examples are appreciated too!

Ideally, simplify examples for the documentation should go here. If you want to setup full example projects, we could have them in a central directory (maybe examples/?).

If you want to work on this, or run into any issues setting up examples, please let me know!

Output of dart pub get on starter project

Resolving dependencies...
Because portfolio depends on riverpod_zap ^0.1.0 which depends on zap_dev ^0.1.0, zap_dev from hosted on https://simonbinder.eu is required.
So, because portfolio depends on zap_dev from hosted on https://pub.dartlang.org, version solving failed.
exit code 1

Do you have any plan to make a way of inegrating Tailwind Css to Zap ?