Skip to content
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
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
25 changes: 0 additions & 25 deletions .github/dependabot.yml

This file was deleted.

6 changes: 3 additions & 3 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ jobs:

strategy:
matrix:
node-version: [20.x]
node-version: [24.x]

steps:
- uses: actions/checkout@v5
- uses: actions/checkout@v6

- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v5
uses: actions/setup-node@v6
with:
node-version: ${{ matrix.node-version }}

Expand Down
26 changes: 0 additions & 26 deletions .github/workflows/dependabot-auto-merge.yml

This file was deleted.

6 changes: 3 additions & 3 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ jobs:

strategy:
matrix:
node-version: [20.x]
node-version: [24.x]

steps:
- uses: actions/checkout@v5
- uses: actions/checkout@v6

- uses: actions/setup-node@v5
- uses: actions/setup-node@v6
with:
node-version: ${{ matrix.node-version }}

Expand Down
18 changes: 18 additions & 0 deletions 404.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<head>
<meta http-equiv="refresh" content="5; URL=https://community.sap.com/topics/open-source" />

<script>

// Redirect for old sap-samples.github.io/ui5-typescript-walkthrough to new location sap-samples.github.io/ui5-typescript-walkthrough
if (window.location.href.startsWith("https://sap-samples.github.io/ui5-typescript-walkthrough")) {
var pathname = window.location.pathname.replace("/ui5-typescript-walkthrough-", "/walkthrough-");
window.location.replace("https://sap-samples.github.io/ui5-typescript-walkthrough/walkthrough" + pathname + window.location.search);
}

</script>
</head>

<body>
<p>If you are not redirected in five seconds, please navigate manually to <a
href="https://community.sap.com/topics/open-source">https://community.sap.com/topics/open-source</a>.</p>
</body>
62 changes: 49 additions & 13 deletions README_AUTHORS.md → CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,40 @@
# Documentation for Tutorial Authors
# Contributing to OpenUI5 Sample App

# General
In general the contributing guidelines of OpenUI5 also apply to this project. They can be found here:
https://github.com/UI5/openui5/blob/main/CONTRIBUTING.md

Some parts might not be relevant for this project (e.g. the browser-specific requirements like jQuery, CSS and accessibility in the "Contribution Content Guidelines") and the contribution process is easier (pull requests will be merged directly on GitHub).

## Requirements

Running the content of this repository locally (as opposed to following the tutorial steps) requires a [Node.js](https://nodejs.org/) version >= `20.11.0` to be installed.

## Download and Installation

> This section describes how to run the content of the repository locally and is *not* required for following the tutorial. For following the tutorial, simply start with Step 1 in the list of steps above. From there, you can also download and run the result of each step locally.

The project is set up as monorepo. All steps are located inside the `steps` folder and labelled with their step number. The monorepo uses `npm` workspaces to manage all steps together. But you can also run `npm` inside each individual step.

To set up the monorepo you first need to install all depenedencies:

```sh
npm install
```

To run any step, just execute one of the scripts from `package.json` via npm, e.g.:

```sh
# Option 1: use workspace command to start the step
npm start -w ui5.walkthrough.step01

# Option 2: change to the folder of the step and start it
cd steps/01
npm start
```

## Documentation for Tutorial Authors

### General

The setup of this project allows maintaining *one* tutorial text that covers both JavaScript and TypeScript with minimal overhead and without duplication of content.

Expand All @@ -11,12 +45,12 @@ Main features of the two-language support are:
2. Two adjacent code sections in different languages are automatically converted to a tab container which allows switching between languages.
3. File extensions writen as `.?s` appear automatically as `.js` or `.ts` depending on the current language.

## Limitations
### Limitations

The feature 3. above does not work inside code blocks (yet).


## Running the preview/dev server
### Running the preview/dev server

To immediately preview the markdown document you are writing *including* the two-language magic, simply run

Expand All @@ -35,11 +69,11 @@ npm start
A browser window will automatically open (on port 3000 or the next free port) and automatically reload on every saved change.


## Writing *one* document which covers both JavaScript and TypeScript without duplication
### Writing *one* document which covers both JavaScript and TypeScript without duplication

The following features help providing language-specific content without duplication of other content.

### 1. Language-specific Blocks of Content
#### 1. Language-specific Blocks of Content

When a certain part of the tutorial content (can be explanation and/or code) is only relevant for *one* of the languages (JavaScript *or* TypeScript), then enclose it within the following tags. The CSS class decides for which language it is meant!

Expand All @@ -61,7 +95,7 @@ JavaScript-only:

The `markdown="1"` part is required for markdown parsing within HTML and the `<summary>` is helpful for readers of the raw markdown view, so please use the tag structure as-is, with your actual content in between.

#### Resulting Appearance<span class="hidden"> in markdown view (not in the final page)</span>
##### Resulting Appearance<span class="hidden"> in markdown view (not in the final page)</span>

<details class="ts-only" markdown="1"><summary>This section is relevant for TypeScript only</summary>
...here comes the TS-only text...
Expand All @@ -72,7 +106,7 @@ The `markdown="1"` part is required for markdown parsing within HTML and the `<s
</details>


### 2. Switchable code blocks in both languages
#### 2. Switchable code blocks in both languages

When a piece of code should be displayed in either JS or TS, whatever is current, then simply create two adjacent markdown-fenced code blocks. They are automatically recognized as language-specific alternatives.

Expand All @@ -91,7 +125,7 @@ Example:

> Some places where this occurs may not be properly recognized, so make sure to test it.

#### Resulting Appearance<span class="hidden"> in markdown view (here in markdown you still see BOTH and no tab container; the magic only happens in the dev server and in GitHub Pages)</span>
##### Resulting Appearance<span class="hidden"> in markdown view (here in markdown you still see BOTH and no tab container; the magic only happens in the dev server and in GitHub Pages)</span>

```js
const i = 0;
Expand All @@ -101,7 +135,7 @@ const i = 0;
const i: number = 0;
```

### 3. File Extensions (`.js/.ts`)
#### 3. File Extensions (`.js/.ts`)

When the text or a section heading mentions the name of a file that will be JavaScript or TypeScript, depending on the language, then use the file extension `.\?s`. It will automatically be switched to the current language.

Expand All @@ -110,11 +144,11 @@ Example:
In this step you create the file `Example.controller.\?s`.
```

#### Resulting Appearance<span class="hidden"> in markdown view (here the extension is not replaced, the replacement only happens in the dev server and in GitHub Pages)</span>
##### Resulting Appearance<span class="hidden"> in markdown view (here the extension is not replaced, the replacement only happens in the dev server and in GitHub Pages)</span>

In this step you create the file `Example.controller.?s`.

## Converting the JS Code to TypeScript
### Converting the JS Code to TypeScript

TODO: tool support for this functionality does not exist yet. It can, however, already be done manually.

Expand All @@ -137,5 +171,7 @@ sap.ui.define(["./BaseController"], function (__BaseController) {

Remove the function definition and the line calling the function. Rename the dependency in the `sap.ui.define` call from `__BaseController` to `BaseController`.

## Contributing with AI-generated code
As artificial intelligence evolves, AI-generated code is becoming valuable for many software projects, including open-source initiatives. While we recognize the potential benefits of incorporating AI-generated content into our open-source projects there are certain requirements that need to be reflected and adhered to when making contributions.

### TODO: Some more similar things, unless we do it in the transpiler
Please see our [guideline for AI-generated code contributions to SAP Open Source Software Projects](https://github.com/SAP/.github/blob/main/CONTRIBUTING_USING_GENAI.md) for these requirements.
Loading