Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

OSOE-918: Fix all \"Javascript\" spelling #154

Merged
merged 1 commit into from
Dec 14, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Lombiq.VueJs.Samples/Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

Example Orchard Core module that makes use of Lombiq Vue.js module for Orchard Core. For general details about and usage instructions see the [root Readme](../Readme.md).

Vue.js is a progressive framework for building user interfaces, mostly single-page applications. What if you want to build an SPA only for one feature or build multiple SPAs in one Orchard Core module? Here's an example of how to organize your Vue apps and components to keep them reusable and also have all the features we like in Orchard Core such as shape overrides and localization. Besides applications using separate Javascript and HTML files, it supports [Single File Components](https://vuejs.org/guide/scaling-up/sfc.html) too, which encapsulate the template and logic of a single reusable component into a single file.
Vue.js is a progressive framework for building user interfaces, mostly single-page applications. What if you want to build an SPA only for one feature or build multiple SPAs in one Orchard Core module? Here's an example of how to organize your Vue apps and components to keep them reusable and also have all the features we like in Orchard Core such as shape overrides and localization. Besides applications using separate JavaScript and HTML files, it supports [Single File Components](https://vuejs.org/guide/scaling-up/sfc.html) too, which encapsulate the template and logic of a single reusable component into a single file.

If you are not familiar with Vue.js you can skip this tutorial or give it a try and see how cool of a framework it is. See: <https://vuejs.org/guide/introduction.html>

Expand Down
2 changes: 1 addition & 1 deletion Lombiq.VueJs.Samples/Views/VueSfc/AppTagHelper.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
Note the difference in the model, the Liquid version uses camelCase "modelValue". This is because the built-in JSON
serializer doesn't alter the names of JSON object properties the way it does with C# objects. *@

@* Below is an example of interacting with your Vue app from Javascript. This is rarely needed, usually only if you want
@* Below is an example of interacting with your Vue app from JavaScript. This is rarely needed, usually only if you want
to dynamically send data from a non-Vue app. Here a button and its JS event handler is the stand-in for such an app.
This is not a practical example, because if you just want to put a piece of the Vue app outside of its main container
you should use Vue's "Teleport" feature. *@
Expand Down
2 changes: 1 addition & 1 deletion Lombiq.VueJs.Samples/Views/VueSfc/EnhancedList.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
<vue-component name="@ResourceNames.EnhancementTableBody" />
@Orchard.GetScriptModuleImportMap()

@* Here we replace the enhanced elements with vue components using vanilla Javascript. *@
@* Here we replace the enhanced elements with vue components using vanilla JavaScript. *@
<script type="module" defer>
import { createApp } from 'vue';
import EnhancementControl from 'enhancement-control.vue';
Expand Down
2 changes: 1 addition & 1 deletion Lombiq.VueJs.Samples/Views/VueSfc/Index.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@

<button id="random" class="btn btn-primary" type="button">@T["Pick Random!"]</button>

@* And finally the initialization. You have to set the type to "module" to indicate that this is a Javascript module
@* And finally the initialization. You have to set the type to "module" to indicate that this is a JavaScript module
that can use the "import" syntax. Modules live in their own async scope and can import other modules by name or URL
so as the name suggests, they are very modular. The "defer" attribute means that the script is only executed when the
main document has loaded, so it's the same as wrapping it in a "DOMContentLoaded" event handler. You don't have to
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@
namespace Lombiq.VueJs.Services;

/// <summary>
/// Classes that inherit from this type will prepend some server-side calculated values in a Javascript block before the
/// Classes that inherit from this type will prepend some server-side calculated values in a JavaScript block before the
/// template. These are accessible through a new property attached to <c>window.Vue</c> (as Vue must already be imported
/// in the header, it is guaranteed to be available here).
/// </summary>
/// <remarks>
/// <para>
/// For example if you set the value of <see cref="PropertyName"/> to <c>myComponent</c> then in Javascript the result
/// For example if you set the value of <see cref="PropertyName"/> to <c>myComponent</c> then in JavaScript the result
/// of <see cref="GetPropertyValueAsync"/> will be available as <c>window.Vue.$orchardCore.myComponent</c>.
/// </para>
/// </remarks>
Expand All @@ -37,7 +37,7 @@ public abstract class ServerSideValuesVueSingleFileComponentShapeAmenderBase : I
protected abstract string PropertyName { get; }

/// <summary>
/// Turns the value resolved by <see cref="GetPropertyValueAsync"/> into Javascript and appends it before the
/// Turns the value resolved by <see cref="GetPropertyValueAsync"/> into JavaScript and appends it before the
/// template.
/// </summary>
public async ValueTask<IEnumerable<IHtmlContent>> PrependAsync(string shapeName)
Expand All @@ -58,7 +58,7 @@ public async ValueTask<IEnumerable<IHtmlContent>> PrependAsync(string shapeName)
}

/// <summary>
/// When awaited, returns the object which will be turned into Javascript value.
/// When awaited, returns the object which will be turned into JavaScript value.
/// </summary>
protected abstract ValueTask<object> GetPropertyValueAsync(string shapeName);
}
4 changes: 2 additions & 2 deletions Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ We at [Lombiq](https://lombiq.com/) also used this module for the following proj

If you just want to see the whole thing in action, check out the [Samples project](Lombiq.VueJs.Samples/Readme.md). Do you want to quickly try it out? Check it out in our [Open-Source Orchard Core Extensions](https://github.com/Lombiq/Open-Source-Orchard-Core-Extensions) full Orchard Core solution and also see our other useful Orchard Core-related open-source projects!

> ⚠️ Starting version 5.0, this Orchard Core module is using Vue 3 and only supports SFC compilation. Resources are now imported as [Javascript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), so the Vue 3 used by your component is independent from Orchard Core's built-in `vuejs` [resource](https://docs.orchardcore.net/en/main/docs/resources/libraries/) and the two can exist on the same page. If you have an existing project that relies on a discontinued version of Vue.js, check out [our migration instructions below](#migrating-from-vue-2).
> ⚠️ Starting version 5.0, this Orchard Core module is using Vue 3 and only supports SFC compilation. Resources are now imported as [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), so the Vue 3 used by your component is independent from Orchard Core's built-in `vuejs` [resource](https://docs.orchardcore.net/en/main/docs/resources/libraries/) and the two can exist on the same page. If you have an existing project that relies on a discontinued version of Vue.js, check out [our migration instructions below](#migrating-from-vue-2).

## Prerequisites

Expand Down Expand Up @@ -47,7 +47,7 @@ If you just want to see the whole thing in action, check out the [Samples projec
}
```

The packages will be automatically installed on build (i.e. `dotnet build`). You can also trigger the installation manually using the `pnpm install` command. Note that since dependencies are delivered as Javascript modules, you don't have to install the `vue` package in your consuming project as well.
The packages will be automatically installed on build (i.e. `dotnet build`). You can also trigger the installation manually using the `pnpm install` command. Note that since dependencies are delivered as JavaScript modules, you don't have to install the `vue` package in your consuming project as well.

### Configuration

Expand Down
Loading