Webデザイナコンポーネントの使用（Svelte）

Svelteアプリケーションを作成する

Svelteアプリケーションを作成する簡単な方法は、SvelteKitを使用することです。

SvelteKitを使用するためには事前にNodeJSがコンピュータにインストールされている必要があります。

コマンドプロンプトで次のコマンドを入力して、新しいSvelteアプリケーションを作成します。

npm create svelte@latest arjs-svelte-designer-app

コマンドを実行すると、いくつか質問されるのでそれぞれ下記のように入力していきます。

Which Svelte app template?……Skeleton project
Add type checking with TypeScript?……Yes, using TypeScript syntax
Select additional options (use arrow keys/space bar)
  Add ESLint for code linting……No
  Add Prettier for code formatting……Yes
  Add Playwright for browser testing……No
  Add Vitest for unit testing……No

作成したディレクトリを作業ディレクトリとします。次のコマンドを入力して作業ディレクトリに移動します。

cd arjs-svelte-designer-app

コマンドプロンプトで次のコマンドを入力してActiveReportsJSのSvelte対応パッケージ、およびビューワを日本語化するためのローカライズパッケージをインストールします。

npm install @grapecity/activereports-svelte @grapecity/activereports-localization

SvelteKitを使用した場合、最初からVite.jsと連携する形でアプリケーションが作成されます。ActiveReportsJSをVite.jsで使用するには設定を追加する必要があります。プロジェクトのルートフォルダに「alias.js」を作成し、以下の内容を設定します。

import moment from "./node_modules/moment";

export const { fn, min, max, now, utc, unix, months,
  isDate, locale, invalid, duration, isMoment, weekdays,
  parseZone, localeData, isDuration, monthsShort, weekdaysMin,
  defineLocale, updateLocale, locales, weekdaysShort, normalizeUnits,
  relativeTimeRounding, relativeTimeThreshold, calendarFormat, ISO_8601
} = moment;

export default moment;

アプリケーションのルートフォルダにあるvite.config.jsファイルの内容を次のように変更します。

import { sveltekit } from '@sveltejs/kit/vite';
import path from "path";

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()],
  resolve: {
    alias: [
      {
        find: /^moment$/,
        replacement: path.resolve(__dirname, "./alias.js"),
      },
      {
        find: /^gc-dv$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/gc-dv.js"
        ),
      },
      {
        find: /^\@grapecity\/ar-js-pagereport$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/@grapecity/ar-js-pagereport.js"
        ),
      },
      {
        find: /^barcodejs$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/barcodejs.js"
        ),
      },
    ],
  },
};
export default config;

src\routes\+page.svelteファイルを開き、その内容を次のように変更します。

<script lang="ts">
    // ARJS関連インポート
    import '@grapecity/activereports/styles/ar-js-ui.css';
    import '@grapecity/activereports/styles/ar-js-designer.css';
    import {Designer} from "@grapecity/activereports-svelte";
    import '@grapecity/activereports-localization/dist/designer/ja-locale';

    import { onMount } from 'svelte';
    let designerInst:Designer;
    function onInit() {
        return {
            language:"ja"
        };
    };

    onMount(() => {
        // レポート読込
        designerInst.setReport({id:"reports/quick-start-sample.rdlx-json"});
    })
</script>

<div id="designer-host">
    <Designer onInit={onInit} bind:this={designerInst}></Designer>
</div>

<style>
    #designer-host {
        width: 100%;
        height: 100vh;
    }
</style>

SvelteKitを使用してアプリケーションを作成した場合、サーバー上でページを作成・描画しクライアント側にHTMLを送信するサーバーサイドレンダリングで作成されますが、ActiveReportsJSはクライアント側でしか動作しません。そのためサーバー上の描画を無効にする必要があります。サーバー上のレンダリングを無効にするには、+page.svelteファイルを含むフォルダに+page.jsファイルを追加し、以下の内容を設定します。

export const prerender = false;
export const ssr = false;

static\reportsディレクトリを作成し、サンプルレポートを作成するで作成したquick-start-sample.rdlx-jsonファイルを配置します。
次のコマンドを入力してSvelteアプリケーションを実行します。

npm run dev

ブラウザで「localhost:5173」を参照し、アプリケーションを表示します。

quick-start-designer