Commit Graph

24 Commits

Author SHA1 Message Date
Ryan Nowak 6f383a0f0f Adds support for 'Context' parameters on components (#1470)
Adds support for 'Context' parameters on components

This change allows you to set the parameter name of a parameterized child content by using the `Context` attribute on the component. The `Context` attribute will be defined (and shown by completion) when the component has one or more declared parameterized (`RenderFragment<>`) child content parameters.

This is nice for cases where you are using implicit child content:

```
<ol>
  <Repeater Items="People" Context="person">
    <li>@person.FirstName</li>
  </Repeater>
</ol>
```

 or, when you have multiple child content elements and want them all to have the same parameter name:

 ```
<MyComponent Items="People" Context="person">
    <ChildContent1><div>@person.FirstName</div></ChildContent1>
    <ChildContent2><div>@person.LastName</div></ChildContent2>
</Repeater>
```

The parameter name can be overridden by using the `Context` parameter on the child content element:

 ```
<MyComponent Items="People" Context="person">
    <ChildContent1 Context="item"><div>@item.FirstName</div></ChildContent1>
    <ChildContent2><div>@person.LastName</div></ChildContent2>
</Repeater>
```

If the component defines a `Context` parameter already then we won't synthesize one - your component's parameter will work exactly as it did before this feature.
2018-09-24 12:22:16 -07:00
Ryan Nowak 4f51d90157 Fix #1399 - crash on start-end syntax for void element
We weren't correctly recovering when a void element is written as a
start-end pair. This change cleans up some of the plumbing around
end-tag handling and adds recognition for this case.

Added a new bespoke diagnostic for the void element case.
2018-09-21 12:54:44 -07:00
Ryan Nowak 100382bf71 Add Type Inference for Generic-Typed Components
This change allows you to use generic-typed components without
explicitly specify type arguments.

**Before:**
```
<Grid Items="@MyItems" TItem="Person">
...
</Grid>
```

**After:**
```
<Grid Items="@MyItems">
...
</Grid>
```

Where possible, the type of the component will be inferred based on the
values passed to component parameters. This won't work like magic, you
have to specify parameters that provide type arguments for all of the
component's type parameters.

This is a best effort system, and it's largely based on the limitations
and behaviours of generic type inference in C#. We think it will work
well with most Blazor features and for most reasonable components. You
should not forget it's easy to specify type arguments, because you may
still have to in some cases.

In particular you may notice issues if you are trying to use a generic
typed component where all of the parameters are delegates or templates.
Type inference for delegates/lambdas in C# is based on the context. Any
time you combine generics and delegates it's easy to get into a scenario
where the compiler won't infer the correct type, or will give up.

----
The type inference feature works by generating a 'thunk' method in
*caller* that can act as a site for type inference (C# does not support
inference on constructors).

For our grid example above, the non-inferenced code will look something
like:
```
builder.OpenComponent<Grid<Person>>(0);
builder.AddAttribute(1, "Items", MyItems);
builder.CloseComponent();
```

Note that we can only write the type `Grid<Person>` because you wrote
`Person` in your code. What you type in the `TItem` attribute value gets
inserted into the generated code such that it fills in the generic type
parameter.

On the other hand, if you want is to infer the type, we have to do some
compiler magic. That looks like:
```
__Blazor.(long generated name).TypeInference.CreateGrid_0();
...

// elsewhere in the file
internal static class TypeInference
{
    public static void CreateGrid_0<TItem>(RenderTreeBuilder builder,
    int seq, int __seq0, global::System.Collections.Generic.List<TItem>
    __arg0)
        {
	        builder.OpenComponent<Grid<TItem>>(seq);
		        builder.AddAttribute(__seq0, "Items", __arg0);
			        builder.CloseComponent();
				    }
				    }
				    ```

				    This allows us to rely on the C#
				    compiler for itype inference.
2018-09-20 12:19:26 -07:00
Ryan Nowak 354752cf16 Add support for generic-typed components (#1417)
* Add the ability to discover generic types/properties

* Add @typeparam directive

Adds the ability to declare a generic-typed component using Razor.

* Add a 'type parameter' property to generic components

* Adds the ability to consume generic-typed components
2018-09-16 14:01:15 -07:00
Ryan Nowak d4cbb86f46 Add Support for Templated Components (#1404)
* Test namespace cleanup

* Add recognication for RenderFragment in tag helpers

* Remove dead code from node writers

* refactor type check

* Continue to treat child content as a delegate in codegen

* Add extension to enumerate child content

* Reorganize code generation tests

These were growing a bit disorganized, and weren't really result in good
code reuse.

* fix test base class

* Add some child-content tests

* Add an explicit node for ChildContent

Adds a strongly typed node to represent a 'ChildContent' and what it
contains. This allows us to simplify the code generation path,
detect/processes more issues in IR passes, and will be essential for
supporting multiple child content.

* Ignore ChildContent in components when it's just whitespace

* Add diagnostic for duplicate child content

* Add support for explicit child content elements

Precursor to support for multiple child content items

* Add support for multiple child-content elements

* Change delegate signature for RenderFragment<T>

* Clean up Tag Helper constants

* Allow RenderFragment<T> as a child content

* Allow renaming the template parameter

* Improve error message for invalid child content

* Add diagnostic for repeated child content parameter names
2018-09-10 18:59:51 -07:00
Ryan Nowak fd5426943f Merge sibling nodes during markup block rewrite
This change adds the ability to merge sibling nodes when possible during
markup block rewriting. We retain that invariant that each markup block
is a valid chunk of markup containing properly nested tags.

We still haven't done any work to remove whitespace yet, so most of the
cases where this comes into play right now will merge an element with
its surrounding whitespace.
2018-08-13 11:17:11 -07:00
Ryan Nowak a05cb42845 Reenable markup blocks (#1286)
* Reenable HtmlBlock unit tests

* Add E2E tests for HTML Block cases

* Remove harded GenerateBaselines=true

* Fix #1193

This commit addresses the root cause of #1193. When we merge HTML
text nodes into HTML blocks we need to re-encode any HTML entities that
were encoded eariler.

I did a bit of a deep dive on how HTML encoding is handled in Blazor and
I think this is the best strategy. I think it's valuable that the
BrowserRenderer uses document.createTextNode, which will always encode
the text - this handles dynamic content. We want to keep this in place
to avoid HTML injection attacks.

* Fix #1265 Reenable MarkupBlock

* test cleanup
2018-08-10 16:29:39 -07:00
Steve Sanderson 4b861929be Temporarily disable HtmlBlockPass for 0.5.1. Will be re-enabled later. 2018-07-27 10:11:31 -07:00
Steve Sanderson 4e892e74da Fix handling nonvoid elements in markup blocks (#1190)
* Fix empty nonvoid elements in markup blocks. Fixes #1186

* Also update another test
2018-07-25 09:53:52 -07:00
Ryan Nowak 8f072a0711 Add HTML Block rewriting (#1146)
* Add HTML Block rewriter

* Baseline updates

* test gaps

* Update some unit tests to represent same behavior as before

* Define Markup frame type. Tests for rendering markup frames into render tree.

* Support markup frames during diffing (retain, insert, update, delete)

* Support markup blocks on WebAssembly

* Support rendering markup frames with server-side execution too

* Support markup blocks with multiple top-level nodes. Support updating markup dynamically.

* Define MarkupString type as a way to insert dynamic markup without needing custom RenderFragment code

* Remove comment

* CR: Better null value handling
2018-07-23 18:18:07 +01:00
Ryan Nowak 45544858a3 Fix #954 - use weak typing for 'event handlers'
This change introduces a mechanism for bypassing type checking and then
uses for the 'event handlers'. The event handler tag helpers have some
ideosyncratic behaviors and rely on overloading at the render tree
builder level.
2018-07-05 09:15:01 -07:00
Ryan Nowak 5b40e3e121 Update versions to 2.1.0 (rtm) 2018-05-31 20:58:09 -07:00
Ryan Nowak b390ae0c1c Rewrite of HTML handling for Blazor
This change replaces the parsing of HTML that we perform during the code
generation phase, which parsing of HTML during the IR lowering phase.
The main benefit of this change is that the structure of the HTML is
reflected in the IR tree, allowing us to do more more advance
transformations.

As an example, see how the the handling of `<script>` tags is now a
separate pass.

As an aside from this I also redesigned the structure of component IR
nodes to match the new HTML element nodes. Passes are now more easily
aware of the nodes they are expected to handle and are more easily aware
of the difference between a component and element. This still isn't as
clean as I would like, but I think it's a reasonable improvement.

Another benefit of this is that the code generation is much simpler and
requires much less bookkeeping and statefulness.
2018-05-03 21:56:03 -07:00
Steve Sanderson 18b9a70dbe Encourage encapsulation of component parameter properties (#713)
* Before refactoring ParameterCollection assignment logic, add more test coverage

* Begin caching parameter assignment info

* Factor out some reflection code to a reusable location

* Use IPropertySetter to avoid all per-property-assignment reflection

* More error cases and tests for parameter assignment

* Enable binding to nonpublic properties

* Add analyzer to warn and provide fix for public component parameters

* Unit test for analyzer

* Component tag helper now includes private properties if they have [Parameter]

* CR feedback: Remove garbage from csproj

* CR feedback: Rename .Build.Analyzers to .Analyzers

* CR feedback: Move BlazorApi.cs to shared; use it from Analyzers test

* Fix incorrect test name

* Make as many parameters private as possible. Replace ILayoutComponent with BlazorLayoutComponent.

* In component tag helper discovery, consider private members too

* Reduce the work in component parameter discovery by not inspecting the BlazorComponent base class (or System.Object)
2018-05-01 10:08:01 +01:00
Ryan Nowak f661021324 Add [Parameter] for component parameters
This change introduces ParameterAttribute to specify a bindable
component parameter. As of the 0.3 release of Blazor we plan to make
[Parameter] required to make a property bindable by callers.

This also applies to parameters when their value is set by the
infrastructure, such as `Body` for layouts, and route paramters.

The rationale behind this change is that we think there is a need to
separate the definition of properties from their suitability for a
caller to set them through markup. We plan to introduce more features in
this area in the future such as marking parameters as required. This is
first step, and we think that this approach will scale nicely as we add
more functionaly.

The 0.3 release seems like the right time to change this behavior since
we're also introducing `ref` for captures in this release.
2018-04-30 13:35:08 -07:00
Steve Sanderson 4033560734 Support 'ref' syntax for capturing references to elements and components (#685) 2018-04-27 17:41:21 +01:00
Ryan Nowak ed06d7b12e Rough cut at async events 2018-04-26 13:31:28 -07:00
Ryan Nowak 846d377b2c Update version numbers to 0.2 in preparation for 0.2 2018-04-11 11:10:17 -07:00
Ryan Nowak c3366bc956 Add event handlers as tag helpers
This change adds support for mapping DOM event handlers as tag helpers
that function in a bi-modal way.

This is a new first-class feature for DOM events, and replaces a few
workarounds like using `@onclick(...)` or `click=@{ ... }`. I haven't
removed those things yet, this is a first pass to get the new support
in, we'll remove those things when we're totally satisfied.

When used with a string like `<button onclick="foo" />` the result is
a simple HTML attribute .

But when used with an implicit expression like
`<button onclick="@Foo" />` or
`<button onclick="@(x => Clicked = true)" />` a C# function is bound to
the click event from the DOM.
2018-04-06 13:00:04 -07:00
Ryan Nowak 5b658c80a1 Replace @bind with bind-...
This change introduces a 'tag helper' that replaces @bind with custom
code generation that accomplishes roughly the same thing.

This feature lights up by dynamically generating tag helpers that are
visible to tooling and affect the code generation based on:
- pattern recognition of component properties
- attributes that create definitions for elements
- a 'fallback' case for elements

'bind' also supports format strings (currently only for DateTime) via
a separate attribute.

This change introduces the basic framework for bind and tooling support.
We know that we'll have to do more work to define the set of default
'bind' cases for the DOM and to flesh out the conversion/formatting
infrastructure.

This change gets us far enough to replace all of the cases we currently
have tests for :) with the new features. The old @bind technique still
works for now.

Examples:

@* bind an input element to an expression *@
<input bind="@SelectedDate" format="mm/dd/yyyy" />
@functions {
    public DateTime SelectedDate { get; set; }
}

@* bind an arbitrary expression to an arbitrary set of attributes *@
<div bind-myvalue-myevent="@SomeExpression">...</div>

@* write a component that supports bind *@

@* in Counter.cshtml *@
<div>...html omitted for brevity...</div>
@functions {
    public int Value { get; set; } = 1;
    public Action<int> ValueChanged { get; set; }
}

@* in another file *@
<Counter bind-Value="@CurrentValue" />
@functions {
    public int CurrentValue { get; set; }
}
2018-03-29 22:04:24 -07:00
flash2048 b53d39e16f Corrects spelling of some comments, method name and remove an excess flag 2018-03-29 14:20:04 +01:00
Ryan Nowak c05657c7f2 Add support general delegate types
This builds upon existing support for UIEventHandler-typed component
properties and applies the same principle to any delegate type.

We try to help by generating the LSH of the lambda `=>` allowing you to
write `OnClick="Foo()"` rather than `OnClick="(e) => Foo()"`. You can of
course use @ as an escape.

The only rough edge here is that if the parameter names aren't memorable
for the delgate type, it's not super helpful.
2018-03-14 11:23:42 +00:00
Ryan Nowak 601e7914f7 Implement components as tag helpers
Implements Component code generation and tooling support end to end
udditionally adds some default `@addTagHelper` directives to make
programming in Blazor a little nicer.

Components are discovered as Tag Helpers using Razor's extensibility
during the build/IDE process. This drives the code generation during
build and lights up a bunch of editor features.

Add
2018-03-14 11:23:41 +00:00
Ryan Nowak daf6a404f9 Implement basic Component discovery
This is the basics of component discovery along with some tests.

The next set of changes will integrate it into the compilation process.
2018-03-14 11:23:40 +00:00