mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
chore(examples): add webpack example set-up
The set-up uses the pre-compiled CSS.
This commit is contained in:
Eric Liu
parent
26f383360f
commit
99f1dd2c34
11 changed files with 5664 additions and 0 deletions
5
examples/webpack/.gitignore
vendored
Normal file
5
examples/webpack/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.DS_Store
|
||||
/build
|
||||
/node_modules
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
23
examples/webpack/README.md
Normal file
23
examples/webpack/README.md
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
# webpack
|
||||
|
||||
> Example webpack set-up using pre-compiled CSS shipped with `carbon-components-svelte`.
|
||||
|
||||
## Getting started
|
||||
|
||||
Quickly scaffold a new project using [degit](https://github.com/Rich-Harris/degit):
|
||||
|
||||
```sh
|
||||
npx degit ibm/carbon-components-svelte/examples/webpack svelte-app
|
||||
cd svelte-app
|
||||
yarn install
|
||||
```
|
||||
|
||||
## Available scripts
|
||||
|
||||
### `yarn dev`
|
||||
|
||||
Starts the app in development mode.
|
||||
|
||||
### `yarn build`
|
||||
|
||||
Builds the app for production.
|
||||
22
examples/webpack/package.json
Normal file
22
examples/webpack/package.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server",
|
||||
"build": "NODE_ENV=production webpack"
|
||||
},
|
||||
"devDependencies": {
|
||||
"carbon-components-svelte": "^0.11.0",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"copy-webpack-plugin": "^6.1.0",
|
||||
"css-loader": "^4.2.2",
|
||||
"html-webpack-plugin": "^4.4.1",
|
||||
"mini-css-extract-plugin": "~0.9.0",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.4",
|
||||
"svelte": "^3.24.1",
|
||||
"svelte-loader": "^2.13.6",
|
||||
"webpack": "^4.44.1",
|
||||
"webpack-cli": "^3.3.12",
|
||||
"webpack-dev-server": "^3.11.0"
|
||||
}
|
||||
}
|
||||
BIN
examples/webpack/public/favicon.ico
Normal file
BIN
examples/webpack/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
15
examples/webpack/public/index.html
Normal file
15
examples/webpack/public/index.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="shortcut icon" href="favicon.ico" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
<title>webpack</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
</body>
|
||||
</html>
|
||||
92
examples/webpack/src/App.svelte
Normal file
92
examples/webpack/src/App.svelte
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<script>
|
||||
import {
|
||||
Content,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
Grid,
|
||||
Row,
|
||||
Column,
|
||||
Tabs,
|
||||
TabContent,
|
||||
Tab,
|
||||
Select,
|
||||
SelectItem,
|
||||
} from "carbon-components-svelte";
|
||||
import Header from "./components/Header.svelte";
|
||||
import Theme from "./components/Theme.svelte";
|
||||
|
||||
let theme = "white";
|
||||
</script>
|
||||
|
||||
<Theme theme="{theme}">
|
||||
<Header />
|
||||
<Content style="background: none; padding: 1rem">
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column lg="{16}">
|
||||
<Breadcrumb noTrailingSlash aria-label="Page navigation">
|
||||
<BreadcrumbItem href="/">Getting started</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
<h1 style="margin-bottom: 1.5rem">Design & build with Carbon</h1>
|
||||
</Column>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Column noGutter>
|
||||
<Tabs aria-label="Tab navigation">
|
||||
<Tab label="About" />
|
||||
<Tab label="Design" />
|
||||
<Tab label="Develop" />
|
||||
<div slot="content" class="tabbed-content">
|
||||
<Grid as fullWidth let:props>
|
||||
<TabContent {...props}>
|
||||
<Row>
|
||||
<Column md="{4}" lg="{7}">
|
||||
<Select
|
||||
labelText="Carbon theme"
|
||||
bind:selected="{theme}"
|
||||
style="margin-bottom: 1rem">
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
<SelectItem value="g100" text="Gray 100" />
|
||||
</Select>
|
||||
<p>
|
||||
Carbon is IBM’s open-source design system for digital
|
||||
products and experiences. With the IBM Design Language
|
||||
as its foundation, the system consists of working code,
|
||||
design tools and resources, human interface guidelines,
|
||||
and a vibrant community of contributors.
|
||||
</p>
|
||||
</Column>
|
||||
</Row>
|
||||
</TabContent>
|
||||
<TabContent {...props}>
|
||||
<Row>
|
||||
<Column md="{4}" lg="{7}">
|
||||
<p>
|
||||
Rapidly build beautiful and accessible experiences. The
|
||||
Carbon kit contains all resources you need to get
|
||||
started.
|
||||
</p>
|
||||
</Column>
|
||||
</Row>
|
||||
</TabContent>
|
||||
<TabContent {...props}>
|
||||
<Row>
|
||||
<Column md="{4}" lg="{7}">
|
||||
<p>
|
||||
Carbon provides styles and components in Vanilla, React,
|
||||
Angular, Vue and Svelte for anyone building on the web.
|
||||
</p>
|
||||
</Column>
|
||||
</Row>
|
||||
</TabContent>
|
||||
</Grid>
|
||||
</div>
|
||||
</Tabs>
|
||||
</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
</Content>
|
||||
</Theme>
|
||||
22
examples/webpack/src/components/Header.svelte
Normal file
22
examples/webpack/src/components/Header.svelte
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<script>
|
||||
import {
|
||||
SkipToContent,
|
||||
Header,
|
||||
HeaderUtilities,
|
||||
HeaderGlobalAction,
|
||||
} from "carbon-components-svelte";
|
||||
import Notification20 from "carbon-icons-svelte/lib/Notification20";
|
||||
import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
|
||||
import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
|
||||
</script>
|
||||
|
||||
<Header company="IBM" platformName="Carbon Components Svelte" href="/">
|
||||
<div slot="skip-to-content">
|
||||
<SkipToContent />
|
||||
</div>
|
||||
<HeaderUtilities>
|
||||
<HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
|
||||
<HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
|
||||
<HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
|
||||
</HeaderUtilities>
|
||||
</Header>
|
||||
7
examples/webpack/src/components/Theme.svelte
Normal file
7
examples/webpack/src/components/Theme.svelte
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script>
|
||||
export let theme = "white";
|
||||
|
||||
$: document.documentElement.setAttribute("theme", theme);
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
6
examples/webpack/src/index.js
Normal file
6
examples/webpack/src/index.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import "carbon-components-svelte/css/all.css";
|
||||
import App from "./App.svelte";
|
||||
|
||||
const app = new App({ target: document.body });
|
||||
|
||||
export default app;
|
||||
52
examples/webpack/webpack.config.js
Normal file
52
examples/webpack/webpack.config.js
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
const webpack = require("webpack");
|
||||
const path = require("path");
|
||||
const CopyPlugin = require("copy-webpack-plugin");
|
||||
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
|
||||
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||
|
||||
const NODE_ENV = process.env.NODE_ENV || "development";
|
||||
const PROD = NODE_ENV === "production";
|
||||
|
||||
module.exports = {
|
||||
stats: "errors-only",
|
||||
mode: NODE_ENV,
|
||||
devtool: PROD ? false : "cheap-eval-source-map",
|
||||
devServer: { historyApiFallback: true },
|
||||
entry: { bundle: ["./src/index.js"] },
|
||||
resolve: {
|
||||
alias: { svelte: path.resolve("node_modules", "svelte") },
|
||||
extensions: [".mjs", ".js", ".svelte"],
|
||||
mainFields: ["svelte", "browser", "module", "main"],
|
||||
},
|
||||
output: { path: `${__dirname}/build`, filename: "[name].[chunkhash].js" },
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(svelte)$/,
|
||||
use: {
|
||||
loader: "svelte-loader",
|
||||
options: { emitCss: true, hotReload: true },
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
sideEffects: true,
|
||||
use: [
|
||||
{ loader: MiniCssExtractPlugin.loader, options: { hmr: !PROD } },
|
||||
"css-loader",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
new CopyPlugin({ patterns: [{ from: "public" }] }),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: PROD ? "[name].[chunkhash].css" : "[name].css",
|
||||
}),
|
||||
new OptimizeCssAssetsPlugin({}),
|
||||
new HtmlWebpackPlugin({ template: "public/index.html" }),
|
||||
],
|
||||
};
|
||||
5420
examples/webpack/yarn.lock
Normal file
5420
examples/webpack/yarn.lock
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue