slicejs-web-framework 1.0.19 → 1.0.21

package/src/Components/AppComponents/RoutingDocumentation/RoutingDocumentation.html

@@ -1,108 +0,0 @@
-<h1 id="routing">Routing in Slice.js</h1>
-<p>
-  Slice.js provides a powerful and flexible routing system that allows you to create single-page applications
-  with multiple views. The routing system is built on top of the browser's History API and offers both
-  declarative and programmatic ways to define and navigate between routes.
-</p>
-
-<h2 id="router-setup">Router Setup</h2>
-<p>
-  Slice.js routing starts with defining your routes in a configuration file. By default, Slice.js looks for
-  this configuration in <code>src/routes.js</code>, but you can customize the path in <code>sliceConfig.json</code>.
-</p>
-
-<div class="routes-config-example"></div>
-
-<p>
-  The route configuration consists of an array of route objects, each with at least a <code>path</code> and a 
-  <code>component</code> property. The router uses this configuration to match URL paths to components.
-</p>
-
-<div class="routing-visualization"></div>
-
-<h2 id="route-component">Using the Route Component</h2>
-<p>
-  The <code>slice-route</code> component is the simplest way to define a route in your components. It renders the specified
-  component when the current URL matches the defined path.
-</p>
-
-<div class="route-component-example"></div>
-
-<p>
-  When defining a route component, you need to specify:
-</p>
-<ul>
-  <li><strong>path</strong>: The URL path that triggers this route</li>
-  <li><strong>component</strong>: The name of the component to render when the path matches</li>
-</ul>
-
-<h2 id="multi-route-component">Using the MultiRoute Component</h2>
-<p>
-  The <code>slice-multi-route</code> component allows you to define multiple routes in a single component. This
-  is particularly useful for sections of your application that have multiple related views, like dashboards or
-  content management systems.
-</p>
-
-<div class="multi-route-example"></div>
-
-<p>
-  The MultiRoute component takes an array of route objects through its <code>routes</code> property. Each route
-  object has the same structure as in the main routes configuration.
-</p>
-
-<h2 id="dynamic-routes">Dynamic Routes with Parameters</h2>
-<p>
-  Slice.js supports dynamic routes with URL parameters. You can define parameters in your route paths using the
-  <code>${paramName}</code> syntax. These parameters are then passed to your component through the <code>props.params</code> object.
-</p>
-
-<div class="dynamic-routes-example"></div>
-
-<p>
-  When a dynamic route matches, the parameters are extracted from the URL and made available to your component.
-  This allows you to create reusable components that can display different content based on the URL parameters.
-</p>
-
-<h2 id="programmatic-navigation">Programmatic Navigation</h2>
-<p>
-  In addition to declarative routing with components, Slice.js provides a programmatic way to navigate between
-  routes using the <code>slice.router.navigate()</code> method.
-</p>
-
-<div class="programmatic-nav-example"></div>
-
-
-
-<h2 id="nested-routes">Nested Routes and Layouts</h2>
-<p>
-  Slice.js supports nested routes, which are powerful for creating complex UIs with shared layouts. You can
-  define child routes in the route configuration, and they will inherit the parent route's path as a prefix.
-</p>
-
-<div class="nested-routes-example"></div>
-
-<p>
-  In this example, the AdminLayout component acts as a container for all administrative pages, providing a
-  consistent layout while the content area changes based on the current route.
-</p>
-
-<h2 id="route-lifecycle">Route Lifecycle and Events</h2>
-<p>
-  When a route changes, Slice.js router triggers several events:
-</p>
-<ol>
-  <li>The previous component is removed from the DOM</li>
-  <li>The new component is built and inserted into the DOM</li>
-  <li>If the new component has an <code>init</code> method, it's called</li>
-  <li>If switching between routes that use the same component, the <code>update</code> method is called instead</li>
-</ol>
-
-<h2 id="route-best-practices">Best Practices for Routing</h2>
-<ul>
-  <li>Organize your routes logically, grouping related routes together with nested routes</li>
-  <li>Use the most specific component for your routing needs - Route for single routes, MultiRoute for related groups</li>
-  <li>Keep route parameters simple and descriptive</li>
-  <li>Add a catch-all 404 route to handle unmatched paths</li>
-  <li>Consider adding loading indicators during navigation, especially for routes that fetch data</li>
-  <li>Use the programmatic navigation API for complex navigation scenarios like redirects or conditional navigation</li>
-</ul>

package/src/Components/AppComponents/RoutingDocumentation/RoutingDocumentation.js

@@ -1,177 +0,0 @@
-export default class RoutingDocumentation extends HTMLElement {
-    constructor(props) {
-        super();
-        slice.attachTemplate(this);
-
-        slice.controller.setComponentProps(this, props);
-        this.debuggerProps = [];
-    }
-
-    async init() {
-        // Code examples for the documentation
-        const routesConfigExample = await slice.build("CodeVisualizer", {
-            language: "javascript",
-            value: `// src/routes.js
-const routes = [
-   { path: "/", component: "HomePage" },
-   { path: "/about", component: "AboutPage" },
-   { path: "/contact", component: "ContactPage" },
-   { 
-      path: "/blog", 
-      component: "BlogPage",
-      children: [
-         { path: "/post/:id", component: "BlogPostPage" },
-         { path: "/category/:category", component: "BlogCategoryPage" }
-      ] 
-   },
-   { path: "/dashboard", component: "DashboardPage" },
-   { path: "/404", component: "NotFoundPage" }
-];
-
-export default routes;`
-        });
-        this.querySelector(".routes-config-example").appendChild(routesConfigExample);
-
-        const routeComponentExample = await slice.build("CodeVisualizer", {
-            language: "javascript",
-            value: `
-// Creating a Route component programmatically
-const userProfileRoute = await slice.build("Route", {
-  path: "/profile",
-  component: "UserProfile"
-});
-document.querySelector(".content-container").appendChild(userProfileRoute);
-});`
-        });
-
-        this.querySelector(".route-component-example").appendChild(routeComponentExample);
-
-        const multiRouteExample = await slice.build("CodeVisualizer", {
-            language: "javascript",
-            value: `// Creating a MultiRoute component in JavaScript
-const dashboardRoutes = await slice.build("MultiRoute", {
-   routes: [
-      { path: "/dashboard", component: "DashboardHome" },
-      { path: "/dashboard/profile", component: "UserProfile" },
-      { path: "/dashboard/settings", component: "UserSettings" },
-      { path: "/dashboard/activity", component: "UserActivity" }
-   ]
-});
-
-// Add it to your layout
-document.querySelector(".dashboard-content").appendChild(dashboardRoutes);`
-        });
-        this.querySelector(".multi-route-example").appendChild(multiRouteExample);
-
-        const dynamicRoutesExample = await slice.build("CodeVisualizer", {
-            language: "javascript",
-            value: `// Route with parameters in routes.js
-{ path: "/user/\${id}", component: "UserProfile" }
-
-// Accessing parameters in the component
-export default class UserProfile extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-      
-      // Access the parameter from props
-      const userId = props.params.id;
-      console.log(\`Loading profile for user \${userId}\`);
-      
-      // Rest of component implementation...
-   }
-}`
-        });
-        this.querySelector(".dynamic-routes-example").appendChild(dynamicRoutesExample);
-
-        const programmaticNavExample = await slice.build("CodeVisualizer", {
-            language: "javascript",
-            value: `// Navigate programmatically
-const navigateButton = await slice.build("Button", {
-   value: "Go to Dashboard",
-   onClickCallback: async () => {
-      // Navigate to a new route
-      await slice.router.navigate("/dashboard");
-   }
-});
-
-// Create a link component
-const profileLink = await slice.build("Link", {
-   text: "View Profile",
-   path: "/dashboard/profile",
-   classes: "nav-link"
-});`
-        });
-        this.querySelector(".programmatic-nav-example").appendChild(programmaticNavExample);
-
-        const nestedRoutesExample = await slice.build("CodeVisualizer", {
-            language: "javascript",
-            value: `// Nested routes configuration
-const routes = [
-   { 
-      path: "/admin",
-      component: "AdminLayout", // This will be the parent layout
-      children: [
-         { path: "/dashboard", component: "AdminDashboard" },
-         { path: "/users", component: "UserManagement" },
-         { path: "/settings", component: "AdminSettings" }
-      ]
-   }
-];
-
-// In AdminLayout component
-export default class AdminLayout extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-   }
-
-   async init() {
-      // The layout remains the same, while child routes render in this container
-      const contentArea = this.querySelector(".admin-content");
-      
-      // Create a MultiRoute for the child routes
-      const childRoutes = await slice.build("MultiRoute", {
-         routes: [
-            { path: "/admin/dashboard", component: "AdminDashboard" },
-            { path: "/admin/users", component: "UserManagement" },
-            { path: "/admin/settings", component: "AdminSettings" }
-         ]
-      });
-      
-      contentArea.appendChild(childRoutes);
-   }
-}`
-        });
-        this.querySelector(".nested-routes-example").appendChild(nestedRoutesExample);
-
-        // Create navigation visualization examples
-        const navVisualization = document.createElement("div");
-        navVisualization.classList.add("route-visualization");
-
-        const routeDiv = document.createElement("div");
-        routeDiv.classList.add("visualization-route");
-        routeDiv.innerHTML = `
-         <div class="vis-route-path">/about</div>
-         <div class="vis-route-component">AboutPage Component</div>
-      `;
-
-        const multiRouteDiv = document.createElement("div");
-        multiRouteDiv.classList.add("visualization-multiroute");
-        multiRouteDiv.innerHTML = `
-         <div class="vis-route-container">
-            <div class="vis-route-path">/dashboard</div>
-            <div class="vis-route-path">/dashboard/profile</div>
-            <div class="vis-route-path">/dashboard/settings</div>
-         </div>
-         <div class="vis-route-component">Currently Active Component</div>
-      `;
-
-        navVisualization.appendChild(routeDiv);
-        navVisualization.appendChild(multiRouteDiv);
-
-        this.querySelector(".routing-visualization").appendChild(navVisualization);
-    }
-}
-
-customElements.define("slice-routingdocumentation", RoutingDocumentation);

package/src/Components/AppComponents/ServiceDocumentation/ServiceDocumentation.css

@@ -1,82 +0,0 @@
-slice-servicedocumentation {
-  color: var(--font-primary-color);
-  font-family: var(--font-family);
-}
-
-slice-servicedocumentation h1,
-slice-servicedocumentation h2,
-slice-servicedocumentation h3 {
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
-}
-
-slice-servicedocumentation p {
-  line-height: 1.6;
-  margin: 1em 0;
-}
-
-slice-servicedocumentation ul,
-slice-servicedocumentation ol {
-  margin: 1em 0;
-  padding-left: 2em;
-}
-
-slice-servicedocumentation li {
-  margin-bottom: 0.5em;
-}
-
-slice-servicedocumentation code {
-  font-family: monospace;
-  background-color: var(--secondary-background-color);
-  padding: 0.2em 0.4em;
-  border-radius: 3px;
-  font-size: 0.9em;
-}
-
-slice-servicedocumentation .service-example,
-slice-servicedocumentation .service-usage-example,
-slice-servicedocumentation .fetch-manager-example,
-slice-servicedocumentation .local-storage-example,
-slice-servicedocumentation .indexed-db-example,
-slice-servicedocumentation .translator-example,
-slice-servicedocumentation .custom-service-example {
-  margin: 1.5em 0;
-}
-
-slice-servicedocumentation strong {
-  color: var(--primary-color);
-}
-
-slice-servicedocumentation .faq-section {
-  margin: 2em 0;
-}
-
-slice-servicedocumentation .faq-section slice-details {
-  margin-bottom: 1em;
-}
-
-slice-servicedocumentation table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1.5em 0;
-}
-
-slice-servicedocumentation th,
-slice-servicedocumentation td {
-  padding: 0.75em;
-  text-align: left;
-  border-bottom: 1px solid var(--primary-color-shade);
-}
-
-slice-servicedocumentation th {
-  background-color: var(--primary-color);
-  color: var(--primary-color-contrast);
-}
-
-slice-servicedocumentation .service-section {
-  padding: 1em;
-  margin: 1em 0;
-  border-left: 3px solid var(--primary-color);
-  background-color: var(--secondary-background-color);
-  border-radius: 0 var(--border-radius-slice) var(--border-radius-slice) 0;
-}

package/src/Components/AppComponents/ServiceDocumentation/ServiceDocumentation.html

@@ -1,74 +0,0 @@
-<h1 id="serviceComponents">Service Components</h1>
-
-<p>
-  Service components in Slice.js handle business logic and data operations without a visual representation. They provide reusable functionality that can be shared across visual components, serving as the backbone of your application's data layer and business logic.
-</p>
-
-<h2 id="serviceComponentOverview">What are Service Components?</h2>
-<p>
-  Service components in Slice.js:
-</p>
-<ul>
-  <li>Handle data operations, API communication, and business logic</li>
-  <li>Don't have visual representation or DOM elements</li>
-  <li>Can be shared across multiple visual components</li>
-  <li>Often follow the singleton pattern (one instance shared throughout the application)</li>
-  <li>Provide a clean separation between UI and business logic</li>
-</ul>
-
-<h2 id="buildingServiceComponents">Creating Service Components</h2>
-<p>
-  Here's a basic example of a service component that fetches and caches data from an API:
-</p>
-<div class="service-example"></div>
-
-<h2 id="usingServiceComponents">Using Service Components</h2>
-<p>
-  Services are built using <code>slice.build()</code> just like visual components, but they interact differently with the application:
-</p>
-<div class="service-usage-example"></div>
-
-<h2 id="builtInServices">Built-in Service Components</h2>
-
-<h3 id="fetchManager">FetchManager</h3>
-<p>
-  The FetchManager service simplifies API communication with features like automatic loading indicators, timeout handling, error management, and response caching:
-</p>
-<div class="fetch-manager-example"></div>
-
-<h3 id="localStorageManager">LocalStorageManager</h3>
-<p>
-  The LocalStorageManager service provides a simplified interface for working with browser localStorage, including automatic JSON serialization and error handling:
-</p>
-<div class="local-storage-example"></div>
-
-<h3 id="indexedDbManager">IndexedDbManager</h3>
-<p>
-  The IndexedDbManager service offers a simplified API for working with IndexedDB, providing methods for CRUD operations on object stores:
-</p>
-<div class="indexed-db-example"></div>
-
-<h3 id="translator">Translator</h3>
-<p>
-  The Translator service enables internationalization in your application, allowing you to support multiple languages:
-</p>
-<div class="translator-example"></div>
-
-<h2 id="customServices">Creating Custom Service Components</h2>
-<p>
-  You can create custom service components for specific application needs. Here's an example of a custom authentication service:
-</p>
-<div class="custom-service-example"></div>
-
-<h2 id="serviceComponentBestPractices">Best Practices</h2>
-<ul>
-  <li><strong>Single Responsibility</strong>: Each service should focus on a specific domain or functionality</li>
-  <li><strong>Error Handling</strong>: Implement robust error handling and logging within services</li>
-  <li><strong>Caching Strategy</strong>: Use appropriate caching strategies to improve performance</li>
-  <li><strong>Service Composition</strong>: Compose complex services by combining simpler services</li>
-  <li><strong>Dependency Injection</strong>: Pass dependencies to services through their constructors</li>
-  <li><strong>Consistent API</strong>: Design service APIs with consistent naming and behavior patterns</li>
-</ul>
-
-<h2 id="serviceComponentsFaq">Frequently Asked Questions</h2>
-<div class="faq-section"></div>