autoblogwc

v0.2.4

Published

6 months ago

AutoBlog React app as a Web Component

0High
0Medium
0Low

syntestio

webcomponent react autoblog

AutoBlog WebComponent

This project converts a React application into a reusable web component using @r2wc/react-to-web-component.

Installation

npm install autoblogwc

Usage

Basic HTML Usage

<!DOCTYPE html>
<html>
  <head>
    <script src="node_modules/autoblogwc/dist/webcomponent.js"></script>
    <link
      rel="stylesheet"
      href="node_modules/autoblogwc/dist/webcomponent.css"
    />
  </head>
  <body>
    <!-- Main blog component -->
    <autoblog-component id="my-blog-123"></autoblog-component>

    <!-- Article preview component -->
    <article-preview
      blogId="my-blog-123"
      title="Article Title"
      imageUrl="https://example.com/image.jpg"
      articleId="article-456"
    ></article-preview>
  </body>
</html>

React with TypeScript

import 'autoblogwc/dist/webcomponent.js'
import type {
  AutoBlogComponentProps,
  ArticlePreviewComponentProps,
} from 'autoblogwc'

function MyApp() {
  return (
    <div>
      {/* TypeScript will provide autocomplete and type checking */}
      <autoblog-component id="my-blog-456" />

      <article-preview
        blogId="my-blog-456"
        title="Getting Started with AutoBlog"
        imageUrl="https://example.com/featured-image.jpg"
        articleId="article-789"
        contentOnly={false}
        html="<p>This is a preview of the article content...</p>"
      />
    </div>
  )
}

React with JavaScript

import 'autoblogwc/dist/webcomponent.js'

function MyApp() {
  return (
    <div>
      <autoblog-component id="my-blog-456"></autoblog-component>

      <article-preview
        blogId="my-blog-456"
        title="My Article"
        imageUrl="https://example.com/image.jpg"
        articleId="article-789"
      />
    </div>
  )
}

Vanilla TypeScript

import 'autoblogwc/dist/webcomponent.js'
import type {
  AutoBlogComponentElement,
  ArticlePreviewComponentElement,
} from 'autoblogwc'

// Create elements programmatically with full type support
const blogComponent = document.createElement(
  'autoblog-component',
) as AutoBlogComponentElement
blogComponent.id = 'my-blog-123'

const articlePreview = document.createElement(
  'article-preview',
) as ArticlePreviewComponentElement
articlePreview.blogId = 'my-blog-123'
articlePreview.setAttribute('title', 'My Article')
articlePreview.setAttribute('imageUrl', 'https://example.com/image.jpg')

document.body.appendChild(blogComponent)
document.body.appendChild(articlePreview)

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

@NgModule({
  // ... other configuration
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

// Add to main.ts or app component
import 'autoblogwc/dist/webcomponent.js'

<!-- component.html -->
<autoblog-component id="my-blog-789"></autoblog-component>
<article-preview
  blogId="my-blog-789"
  title="Article Title"
  [contentOnly]="false"
></article-preview>

Available Components

`<autoblog-component>`

Main blog component that displays a full blog interface with navigation, article listing, and individual article views.

Properties:

| Property | Type | Required | Description | | -------- | ------ | -------- | ------------------------------ | | id | string | No | Unique identifier for the blog |

`<article-preview>`

Component for displaying article previews and standalone article content.

Properties:

| Property | Type | Required | Description | | ----------- | ------- | -------- | ---------------------------------------------------- | | blogId | string | No | The blog ID to associate with | | html | string | No | HTML content to display | | imageUrl | string | No | Image URL for the article | | title | string | No | Article title | | contentOnly | boolean | No | Whether to show content only (without extra styling) | | articleId | string | No | Unique identifier for the article |

TypeScript Support

This package includes full TypeScript definitions out of the box! When you install the package, you automatically get:

✅ Autocomplete for all component properties
✅ Type checking to catch errors at compile time
✅ IntelliSense in your IDE for better development experience
✅ JSX support for React applications
✅ No additional @types/ package needed

Available Types

import type {
  // Props interfaces for React usage
  AutoBlogComponentProps,
  ArticlePreviewComponentProps,

  // Element interfaces for vanilla JS/TS usage
  AutoBlogComponentElement,
  ArticlePreviewComponentElement,
} from 'autoblogwc'

Type-Safe Usage Examples

// React component with full type safety
const BlogPage: React.FC = () => {
  const blogId = 'my-blog-123'

  return (
    <div>
      {/* TypeScript will validate these props */}
      <autoblog-component id={blogId} />

      <article-preview
        blogId={blogId}
        title="My Article"
        imageUrl="https://example.com/image.jpg"
        contentOnly={false} // TypeScript knows this should be boolean
      />
    </div>
  )
}

// Vanilla TypeScript with type assertions
const createBlogComponent = (blogId: string): AutoBlogComponentElement => {
  const element = document.createElement(
    'autoblog-component',
  ) as AutoBlogComponentElement
  element.id = blogId // Fully typed
  return element
}

Development

Local Development

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

# Build web component for distribution
npm run build:webcomponent

Azure DevOps Pipeline

This project includes an Azure DevOps pipeline (azure-pipelines.yml) that:

Builds the web component
Publishes the package to npm registry

Setup Instructions

Configure npm access token:
- Go to your Azure DevOps project
- Navigate to Pipelines → Library → Variable groups
- Create a variable named NPM_REGISTRY_TOKEN
- Set its value to your npm access token
- Mark it as secret
Create npm access token:
- Go to npmjs.com
- Sign in to your account
- Go to Access Tokens
- Generate new token with "Automation" type
- Copy the token value
Update package.json:
- Update the repository.url field with your actual repository URL
- Update the author field with your information
Trigger the pipeline:
- The pipeline will automatically run on pushes to main/master branches
- Or when you create version tags (e.g., v1.0.0)

License

MIT